Soru Birden çok görüntüyü bir div merkezinde yatay olarak hizalama


Bir div'um var ve bu divun çoklu görüntülerinin ortasında hizalamak istiyorum. Tüm görüntüler 16px'lik aynı yüksekliğe ve genişliğe sahiptir. Sorun şu ki, onları ortalayabiliyorum ve aşağıda daha fazla alana sahip olduğum ama ekranı kullandığımda: onu kaldırmak için blok, tekrar sola hizalanmışlar. İşte kodum:

görüntüleri içermek istediğim div:

.cell{
    position: relative;
    float: left;
    width: 300px;
    min-height: 22px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;

    line-height: 22px;
    font-family: Arial, Verdana;
    font-size: 12px;
    color: #000;
    text-decoration: none;
    text-align: center;

    margin-bottom: 2px;
    margin-right: 2px;
}

Yukarıdaki sınıf genel olarak gerekli özelliklere sahiptir. Bu yüzden img öğeleri için bir sınıf oluşturmak istiyorum, böylece birbirlerinin yan yana ve hepsi birlikte yatay olarak hizalanabiliyorlar.

Herhangi bir çalışma önerisi ?! :)


21
2018-02-24 16:08


Menşei


Bazı HTML kodlarına ne dersiniz? - HerrSerker
İşte bir araya getirdiğim bir keman. Sadece hareket eden şeyleri almak için: jsfiddle.net/ah2Uw - thepriebe
Öyleyse divun alt kısımdaki görüntülere sarılmak mı istiyorsun? Burada gerçekten ne yapmak istediğin konusunda kafam karıştı. Var min-height: 22px;Bu yüzden, resimleriniz 16 piksel olduğu için altta daha fazla alan olacak. - thepriebe
thepriebe, sen haklıydın. Çözümünüzde, yalnızca hücremimin yükseklik ve genişliğini ekledim ve hepsi doğru şekilde çalıştı. Hızlı yanıtın için teşekkür ederim! :) - Dimitris Damilos


Cevaplar:


Bir blok seviyesi öğesi kayan, onu sola veya sağa itecektir. IMG'de "display: inline-block". Ve float ve pozisyon ifadelerini kaldırın. Daha sonra konteyner div için "text-align: center".

http://jsfiddle.net/B6Jsy/

Sahte bir img olarak div kullandım ama aynı şekilde çalışmalı.


42
2018-02-24 16:17



Teşekkürler bu bana bugün çok yardımcı oldu. - drew010
İyi cevap! Bana çok yardımcı oldu! - Rameez Hussain
@jmbertucci Beni kurtardın! - OscarRyz


<div class="Image">FIRST</div>
<div class="Image">SECOND</div>

 

.ImageHolder{
text-align:center;
}

.Image{
display:inline-block;
}

5
2018-05-21 10:33