CODEWITHSUNDEEP
htmlcss
Bunjerd Sparrow
Bunjerd Sparrow

Reputation: 88

Vertical align for list item

I want to do vertical align of each row with list item.

I tried to put

display:inline-block; vertical-align:middle;

to 'li' but layout look different. How can adjust the CSS?

HTML

<div class="half-box">
    <div class="ticket-list-box">
        <ul>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok xxxx London</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok xxxx London</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok xxxx London</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
        </ul>
    </div>
</div>

CSS:

body{
margin:0px;padding:0px;
font:normal 13px Tahoma;}
a{text-decoration:none;color:#08d39e}
a:hover{text-decoration:underline;}
.ticket-list{clear:left;float:left;}
.half-box{float:left;width:328px;}
.ticket-list-box{width:318px;height:240px;overflow:hidden;}
.ticket-list-box ul{padding:0;margin:0;list-style:none;}
.ticket-list-box ul li:nth-child(even){background:#cddff5;}
.ticket-list-box ul li.even{background:#cddff5;}
.ticket-list-box ul li{height:34px;border-right:1px solid #6fb6f3;}
.ticket-list-box ul li span.img{float:left;width:50px;padding-right:4px;overflow:hidden;}
.ticket-list-box ul li a{float:left;width:200px;}
.ticket-list-box ul li span.price{float:right;width:40px;padding-right:8px;font-weight:600;color:#ed368e;}

http://jsfiddle.net/eXdzd/

Upvotes: 2

Views: 1172

Answers (2)

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

You just need to change the ticket-list-box ul li adding this two lines:

.ticket-list-box ul li{
   ...
   line-height: 30px;
   display: inline-block;
}

Check it on Fiddle!

Upvotes: 0

Dipak
Dipak

Reputation: 12190

Use display: table-cell; it has support from IE8+

Check this Working Demo

.ticket-list-box ul li span.img{ vertical-align: middle; display: table-cell; width:50px;padding-right:4px;overflow:hidden;}
.ticket-list-box ul li a{ vertical-align: middle; display: table-cell; width:200px;}
.ticket-list-box ul li span.price{ vertical-align: middle; display: table-cell; width:40px;padding-right:8px;font-weight:600;color:#ed368e;}

Upvotes: 1

Related Questions