Вертикально выровнять неупорядоченный список с изображениями и текстом, который отображается под изображением?

Итак, мне нужна помощь в вертикальном выравнивании неупорядоченного списка с изображениями и текстом внутри одного и того же элемента. Изображение должно быть выровнено по вертикали с текстом непосредственно под ним.

Вот мой код:

html:

<div id="sidetrans">
<ul>
<li><a data-ftrans="slide" href="slide2.html">iPhone 1&2<img alt="next"      src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone 3G<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone 3GS<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone 4<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone4S<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone5<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
</ul>
</div>

CSS

#sidetrans {
padding-top:15px;
text-align:left;}

#sidetrans a{
padding:0; }

#sidetrans a img{
 vertical-align: text-bottom;   }

#sidetrans ul li{
display:inline;
list-style: none;}

image vertical-alignment css html-lists
person user2229773    schedule 31.03.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Надеюсь, я правильно понимаю. Вы хотите, чтобы все ссылки были вертикальными и текстом под изображением. Так что, если вы сделаете некоторые изменения в html, это будет хорошо. Поместите текст после изображения, а затем поставьте display: block; для изображения.

img {
display: block;
}

проверьте это перо

person crazyrohila    schedule 31.03.2013
comment
Уверен, что OP по-прежнему хочет, чтобы элементы списка отображались встроенными: jsfiddle.net/5kUfg. - person cimmanon; 31.03.2013
comment
обновил перо, если он хочет, чтобы список отображался встроенным. но если нет, то удалите float:left; из css. - person crazyrohila; 01.04.2013
comment
Не могли бы вы исправить неработающую ссылку? - person Ryan Gates; 13.03.2014

arrow_upward
0
arrow_downward

Удалите эту строку. Вам не нужны эти строки.

#sidetrans ul li{
display:inline;
list-style: none;}

Пожалуйста, проверьте это http://jsbin.com/oqeteh/5/edit.

person Ramesh Rajendran    schedule 31.03.2013