我在一个浮动的DIV中放了一张图片,但我不知道如何将其垂直居中。
<div style="height: 300px">
<img style="height: 50px" src="something" />
</div>
垂直居中:middle 当然不起作用。
我在一个浮动的DIV中放了一张图片,但我不知道如何将其垂直居中。
<div style="height: 300px">
<img style="height: 50px" src="something" />
</div>
垂直居中:middle 当然不起作用。
为了在父元素内垂直对齐文本,需要注意img
是一个内联元素,所以与文本类似。您可以将line-height
设置为父元素的height
来实现:
div {
height: 300px;
line-height: 300px;
}
vertical-align
CSS样式指定了文本在其文本行内的对齐方式。这允许您将文本指定为上标或下标,例如。<td>
和<th>
元素)使用vertical-align
样式正是为了将单元格内容对齐到单元格内部。valign
属性。line-height
与整个盒子的高度相同即可。您可能甚至不需要使用vertical-align
。display:table-cell;
使元素模拟表格单元格,然后使用vertical-align
。这可以工作,但可能会产生意想不到的后果(您可能不想模拟表格单元格的其他属性)。position:absolute;
top:50%;
height:200px;
margin-top:-100px; /* half the height */
还有其他一些,但是这些应该可以让你开始了。
希望能有所帮助。
使用translate属性,它简单易用并且即使在IE中也有效:
img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
对于一个使用现代浏览器(IE8及以上)的解决方案,不使用表格,我比较喜欢这个。
<style>
/* Can be any width and height */
.block {
height:500px;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can be any width or height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
</style>
<div class="block"><div class="centered">Centered Content</div></div>
vertical-align
属性在 td
元素上才有真正的效果。可以尝试以下方式:
<table>
<tr>
<td style='height:300px; vertical-align:center'>
<img src='something'>
</td>
</tr>
</table>
如果您知道的高度和宽度:
<div style='height:300px;'>
<img style='height:50px; position:relative; top:50%; margin-top:-25px'>
</div>
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#container {
display: box;
box-orient: vertical;
box-pack: center;
}
#text {
vertical-align: middle;
}
请查看此js-fiddle示例:verical align js-fiddle
对于任何情况,JavaScript 可能是最好的选择,以使图像在垂直中心居中。如果您可以使用像 jQuery 这样的库,那么只需要几行代码。
$(function(){
var containerHeight = $('#container').outerHeight();
var imgHeight = $('#logo img').outerHeight();
var difference = (containerHeight - imgHeight)/2;
$('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});
});
vertical-align
实际用于什么,那么你将成为一个更好的CSSer: http://phrogz.net/css/vertical-align/ - scragzdisplay:table-cell
。当然,我也不会使用我提出的<table>
的答案。哈。 - Jason