Wyrównanie w pionie zawartości w elementach listy blokowanych w linii

Próbuję wyświetlić nieuporządkowaną listę w poziomie. W każdym elemencie listy mam znacznik zakotwiczenia z obrazem, który chcę wyświetlić wyrównany pionowo w elemencie listy. Oto mójWyrównanie w pionie zawartości w elementach listy blokowanych w linii

HTML:

<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; 
}

Co robię źle tutaj?

Źródło

2011-09-15 Steven

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

Spróbuj użyć display: table-cell; zamiast display: inline-block;

Źródło

2011-09-16 00:05:01 Joe

Cześć. Ciekawi mnie twoje podejście do tego, o którym mówi @Kyle Sevenoaks poniżej ('float: left'.) Jakieś zalecenie, które jest lepsze? Oba wydają się osiągać ten sam efekt wizualny, ale ja się po prostu zastanawiałem. TIA. –

@SalvatoreIovene, table-cell pozwala na pionowe wyrównanie, a także poziome. http://jsfiddle.net/zgxHB/20/, widok rozwiązania typu float. – Joe

Dzięki @JoeTuskan. Więc jeśli nie zależy Ci na pionowym ustawieniu, oba sposoby są zamienne? –

Spróbuj unieść lewą li. Spowoduje to wyświetlenie ich w linii poziomej i zachowują swój status blok

Źródło

2011-09-15 23:59:27 Kyle

display: inline-block; traktuje element tak, jakby był wbudowany, co oznacza, że wszelkie spacje w znacznikach są wyświetlane podczas renderowania strony.

Spróbuj:

<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>

OR:

<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>

Źródło

2013-09-10 17:52:31 Kyle

Wyrównanie w pionie zawartości w elementach listy blokowanych w linii

Odpowiedz

Powiązane problemy