Изображение должно размещаться по вертикали и горизонтали по центру, но, как видно по картинке, по вертикали центрирования не происходит:
HTML:
<div class="socialicons">
<div class="main_social">
<img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" class="scimg">
</div>
</div>
CSS:
.main_social {
height: 40px;
width: 40px;
text-align: center;
position: absolute;
top: 0;
right:0;
}
.social_slideout {
display: none;
}
.socialicons {
width: 100%;
height: 40px;
float: left;
position: relative;
background-color: #444444;
}
.scimg {
line-height: 40px;
width: 30px;
height: 30px;
}
Проблема в том, что я не понимаю, почему не работает line-height: 40px;
. Пробовал также vertical-align: middle
применять к scimg
, но визуально оно так же не по центру, чуть ближе к нижней части блока выходит.
Песочница: https://jsfiddle.net/yt7L6fvr/
.main_social { position: absolute; }
, то почему не сделать егоtop: 5px;
?top
поменять...