Вертикално подравняване на неподреден списък с изображения и текст, който се показва под изображението?

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

Ето моят код:

html:

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