Централизация IMG в сНу элемента с высотой DIV составляет 100%

Question

У меня есть этот код:

<header> 
<div id="logo"> 
    <img src="img.png" width="288px" height="80px"/> 
</div> 
</header> 

И это CSS:

header { width: 960px; height: 100px; padding: 10px; } 

#logo { float: left; height: 100%; border: 1px solid #000; } 

#logo img { border: 1px solid #000; } 

Как централизовать вертикально элемент IMG в этом DIV? Я использую таблицу отображения и ячейку таблицы, но не работаю.

Answer 1

#logo { height: 100%; border: 1px solid #000; text-align:center; } 
             -------^^^^^^^^^^^^^^^^^^--- 

также удалить float

Live Demo

Answer 2

Используйте этот тег выравнивания текста: центр; от CSS для изображения к CSS для его родительского div, поэтому ваш CSS выглядит так:

.box { 
    height: 100%; 
    width: 450px; 
    border: 2px solid red; 
    background: green; 
    overflow: hidden; 
    text-align:center 
} 

.box img { 
    height: 100%; 
    width: auto; 
} 

Answer 3

Просто замените свой CSS следующим образом.

http://jsfiddle.net/lvtrvd/29uGQ/

header { width: 400px; height: 100px; padding: 10px; } 

#logomark { height: 100%; border: 1px solid #000;position: relative;} 

#logomark img { border: 1px solid #000; position: absolute;top:0; 
bottom:0;left:0;right:0; margin:auto;}