Html 如何在div中居中放置包含图像的div?
我需要在div中垂直和水平居中放置一个图像。我正在使用“显示内联块”属性 HTMLHtml 如何在div中居中放置包含图像的div?,html,css,Html,Css,我需要在div中垂直和水平居中放置一个图像。我正在使用“显示内联块”属性 HTML <div class="container"> <div class="box"> <div class="image-container"><img src="image.gif"></div> </div> </div> <div class="container"> <div
<div class="container">
<div class="box">
<div class="image-container"><img src="image.gif"></div>
</div>
</div>
<div class="container">
<div class="box">
<img src="http://placehold.it/200x200">
</div>
</div>
对于水平面,您可以使用:
.box {
display: inline-block;
width: 32px;
height: 32px;
border: 1px solid #f2f2f2;
margin:auto;
text-align:center;
}
就我所知你可以用垂直的
#content {position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */}
请阅读:
您可以将图像放入如下表格:
<table class="container">
<tr class="box">
<td class="image-container"><img src="image.gif"></td>
</tr>
</table>
这种方法非常适用于未知维度的动态内容 基本上,我们使用
vertical align:middle
进行垂直居中,使用text align:center
进行水平居中。为了使垂直对齐:中间在div
上工作,我们需要将父元素设置为display:table
,将目标子元素div
设置为display:table cell
。当然,您可以通过绝对定位来实现这样的居中,但是,这需要您了解img
的尺寸。这种方法适用于未知维度
HTML
<div class="container">
<div class="box">
<div class="image-container"><img src="image.gif"></div>
</div>
</div>
<div class="container">
<div class="box">
<img src="http://placehold.it/200x200">
</div>
</div>
取出图像容器div并将图像标签直接放入框中会容易得多。然后你可以使用垂直对齐和文本对齐将图像居中。你事先知道图像的尺寸吗?@j08691是的,我应该加上这个。如果有必要的话,它是16x16px。你可能想测试一下。它工作正常,不需要绝对定位。我添加了一个JSFiddle。也许有更好的方法,但我还没有找到一种在绝对定位不起作用的情况下有效的方法,比如在响应式设计中。我一直在寻找这种方法,因为我知道它确实存在+这是动态的吗?例如,当我将浏览器移动得更小时,表格单元格是否会移动?
html, body {
height:100%;
width:100%;
margin:0px;
}
.container {
display:table;
vertical-align:middle;
text-align:center;
height:100%;
width:100%;
}
.box {
display:table-cell;
vertical-align:middle;
}