[英]image not vertical-align middle div
我正在尝试将图像插入到div中,但它不在中间对齐。
你能帮我么 !
<div style="width:200px; height:200px; flaot:left; margin:0; padding:0;"><img src="image.png" width="100" height="100" /></div>
<img style="vertical-align:middle;" src="image.png" width="100" height="100" />
当您知道所涉及的高度时,可以使用负边距实现此目的:
<div style="width:200px; height:200px; float:left; margin:0; padding:0;"><img src="image.png" width="100px" height="100px" style="margin-top: -50px" /></div>
如果您知道所有尺寸(div和img),则可以使用以下格式 : tinkerbin
CSS:
#content{
width: 200px;
height: 200px;
margin: 0;
padding: 0;
float: left;
line-height: 200px;
}
#content img{
vertical-align: middle;
}
HTML:
<div id="content">
<img src="http://placekitten.com/120/120" width="100" height="100" />
</div>
或另外一个版本: tinkerbin
CSS:
#content{
width: 200px;
height: 200px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
#content img{
position: relative;
top: 50%;
margin-top: -50px;
}
我通常使用它,它的工作原理是...
<div style="width:200px; height:200px; margin:0; padding:0; display: table-cell; vertical-align: middle;"><img src="image.png" width="100" height="100" /></div>
嘿,现在习惯于Dispaly:table-cell
属性并删除 float:left;
在你的CSS
像这样
的CSS
.parent{
width:200px;
height:200px;
text-align:center;
display:table-cell;
vertical-align:middle;
margin:0; padding:0;
background:red;
}
html
<div class="parent">
<img src="http://outgrow.me/wp-content/uploads/2012/06/ramos-305x203.jpg" width="100px" height="100px" />
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.