İçeriği satır içi liste öğelerinde dikey olarak hizala

Sıralanmamış bir listeyi yatay olarak görüntülemeye çalışıyorum. Her liste öğesinde, bir liste ile bir anchor etiketim var, liste öğesinde dikey olarak hizalanmış olarak görüntülemek istiyorum. İşte benimİçeriği satır içi liste öğelerinde dikey olarak hizala

HTML var:

<ul> 
    <li> 
     <a href="#"> 
      <img src="1.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <img src="2.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <img src="3.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li> 
</ul>

CSS:

ul 
{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    height: 93px; 
} 

ul li 
{ 
    display: inline-block; 
    width: 110px; 
    height: 93px; 
    text-align: center; 
    vertical-align: middle; 
}

yanlış burada ne yapıyorum?

kaynak

2011-09-15 Steven

http://jsfiddle.net/zgxHB/1/

display: table-cell; yerine

kaynak

2011-09-16 00:05:01 Joe

Merhaba. Ben senin yaklaşımını merak ediyorum @Kyle Sevenoaks önerileri aşağıda ('float: left'.) Biri daha iyi olan herhangi bir öneri? Her ikisi de aynı görsel etkiyi elde ediyor gibi görünüyor, ama ben sadece merak ediyordum. TIA. –

@SalvatoreIovene, tablo hücresi yatay hizalamanın yanı sıra dikey hizalamayı da sağlar. http://jsfiddle.net/zgxHB/20/, yüzdürme çözümünün bir görünümü. – Joe

Teşekkürler @JoeTuskan. Yani dikey hizalamayı umursamıyorsanız, her iki yol birbiriyle değiştirilebilir? –

Li'nin solunu yüzmeyi deneyin. Bu

kaynak

2011-09-15 23:59:27 Kyle

display: inline-block; ait kullanmayı deneyin onların blok durumu yatay bir çizgi bunları görüntüleyebilir ve koruyacaktır display: inline-block; öğeyi satır içi düzeyi gibi ele alır; bu, biçimlendirmenizdeki herhangi bir boşluk, sayfa oluşturulduğunda görüntülenir.

TL:

<ul><li> 
     <a href="#"> 
      <img src="1.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><li> 
     <a href="#"> 
      <img src="2.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><li> 
     <a href="#"> 
      <img src="3.jpg" alt="" height="50" width="50" /> 
     </a> 
</li></ul>

VEYA:

<ul><!-- 
    --><li> 
     <a href="#"> 
      <img src="1.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><!-- 
    --><li> 
     <a href="#"> 
      <img src="2.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><!-- 
    --><li> 
     <a href="#"> 
      <img src="3.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><!-- 
--></ul>

kaynak

2013-09-10 17:52:31 Kyle

İçeriği satır içi liste öğelerinde dikey olarak hizala

cevap

İlgili konular