我有这样的标记:
<div> <img /> </div>div高于img:
div { height: 100px; } img { height: dynamic-value-smaller-than-100px; }我需要将图像放置在div的中间(在其上下具有相同的空白).
I need the image to be in the middle of the div (have same amout of white space above and below it).
我尝试了此操作,但它不起作用:
I tried this and it does not work:
div { vertical-align: middle; } 推荐答案如果您的图像纯粹是装饰性的,那么将其用作背景图像可能是一种更具语义的解决方案.然后,您可以指定背景的位置
if your image is purely decorative, then it might be a more semantic solution to use it as a background-image. You can then specify the position of the background
background-position: center center;如果它不是装饰性的并且构成有价值的信息,则img标签是合理的.在这种情况下,您需要为包含div的样式设置以下属性:
If it is not decorative and constitutes valuable information then the img tag is justified. What you need to do in such case is style the containing div with the following properties:
div{ display: table-cell; vertical-align: middle }在此处详细了解此技术.据说无法在IE6/7上运行(在IE8上运行).
Read more about this technique here. Reported to not work on IE6/7 (works on IE8).
更多推荐
如何使用CSS在HTML中的div元素内垂直居中放置图像?
发布评论