Как вертикально центрировать изображение в div?

Question

У меня есть следующее изображение в DIV

<div id="left-control"> 
     <img src="img/icons/ic_next_3x_re.png" /> 
    </div> 

Вот устанавливаемому сотовые

#left-control { 
    height: 100%; 
    float: left; 
} 

#left-control > img { 
    display: block; 
    margin: 250px 0; 
    z-index: 1; 
} 

Но по какой-то причине я не могу показаться, чтобы вертикально не центрировать изображение независимо от того, что CSS я стараюсь. Какие-либо предложения?

Answer 1

Существует не удивительный способ выполнить это, но то, что ниже, должно сделать трюк.

#left-control { 
    float: left; 
    height: 100%; 
} 

#left-control:before { 
    content: ""; 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
} 

#left-control img { 
    vertical-align: middle; 
    z-index: 1; 
} 

Адрес simple fiddle. Имейте в виду, что я вручную установил высоту для элемента #left-control в этом примере, так как скрипка не позволяла на 100%.

Answer 2

Вы можете использовать таблицы CSS для этого.

.wrapper { 
 
    display: table; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
} 
 
#left-control { 
 
    height: 100%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
#left-control > .img { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    z-index: 1; 
 
    background: red; 
 
}

<div class="wrapper"> 
 
    <div id="left-control"> 
 
    <div class="img"></div> 
 
    </div> 
 
</div>

Answer 3

можно обернуть IMG, в другой DIV, как так ..

<div id="left-control"> 
     <div class="vert-align"> 
     <img src="img/icons/ic_next_3x_re.png" /> 
     </div> 
    </div> 

затем в CSS сделать что-то вроде этого ...

#left-control { 
    height: 100%; 
    position:relative; 
} 

#left-control > img { 
    display: block; 
    margin: 250px 0; 
    z-index: 1; 
} 

.vert-align{ 
    position: absolute: 
    margin: auto: 
    top:0; left:0; right:0; bottom:0; 
    height: 100px; 
} 

вы можете играть с верхним левым правым и нижним свойствами, чтобы установить его на желаемая должность.