How do you vertically align images within a list or a div?

Question

I have the following code for showing some images:

HTML:

        

            


        
                      

              相关标签:
       
      

Answer 1

Add vertical-align: middle; to .footer-logos img:

.footer-logos img {margin-left:20px;margin-right:20px;vertical-align:middle;}

That said, you should set a fixed width and height in each of the <img> elements to avoid the whole thing jumping up during page load.

Answer 2

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

Answer 3

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