I have the following code for showing some images:
HTML:
<div class="footer-logos">
<ul>
<li><img src="/sites/default/files/imagefield_thumbs/All Ears Cambodia Logo_1.png" alt="" class="first"></li>
<li><img src="/sites/default/files/imagefield_thumbs/MLF rev.jpg" alt="" class=""></li>
<li><img src="/sites/default/files/imagefield_thumbs/TAMTF A.jpg" alt="" class=""></li>
<li><img src="/sites/default/files/imagefield_thumbs/unltd-logo.png" alt="" class=""></li>
<li><img src="/sites/default/files/imagefield_thumbs/CECILYS HIGH RES.jpg" alt="" class=""></li>
<li><img src="/sites/default/files/imagefield_thumbs/Street Child Africa.jpg" alt="" class="last"></li>
</ul>
</div>
CSS:
.footer-logos {text-align:center;}
.footer-logos img {margin-left:20px;margin-right:20px;}
.footer-logos img.first {}
.footer-logos img.last {}
.footer-logos ul {}
.footer-logos ul li {display: inline; list-style:none;}
This produces images that look like:
alt text http://labs.dante-studios.com/footer-logos-normal.jpg
But i would like it to center the logos vertically so it looks like:
alt text http://labs.dante-studios.com/footer-logos-fixed.jpg
I've tried vertically aligning everything through CSS but that doesn't really work unless i'm using a table. So anyway i can get the desired effect without using a table row?
UPDATE 1
The images that are produced can be of different heights, thus cannot use a fixed height css element...
To center an image vertically, you can wrap it in a block element like a div and use a combination of the CSS position property, the left and top properties, and the transform property.
To center a div vertically on a page, you can use the CSS position property, top property, and transform property. Start by setting the position of the div to absolute so that it's taken out of the normal document flow. Then set the top property to 50%.
The CSS just sizes the div, vertically center aligns the span by setting the div's line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.
Do the images have a fixed upper bound as to their height?
If so you can set the line-height
of the containing div to that height, and then set vertical-align
property of the img
tags to middle
.
See here: http://phrogz.net/CSS/vertical-align/index.html
ul.seznam {margin: 0px; padding: 15px 0px 15px 15px; list-style: none;}
li.bod {color: #502945; font: normal 13px/21x Tahoma;
margin: 0px 0px 0px 70px; padding: 0px 0px 2px 25px;
background: url(components/bod_odrazka.png) left no-repeat;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With