[英]Vertically center an image inside div
我需要将图像放置在div内垂直居中的位置。 你能帮我这个忙吗? 以下是我尝试过的代码段。
<html>
<body>
<div style="width:190px;height:100%;">
<img src="sample.jpg" width="190px" height="190px"/>
</div>
</body>
</httml>
的HTML
<div>
<img src="http://i.stack.imgur.com/PbkUt.jpg" width="190px" height="190px"/>
</div>
的CSS
div{
height:400px;
width:190px;
background-color:grey;
display:table-cell;
vertical-align:middle;
}
检查这个小提琴http://jsfiddle.net/x5TK4/
<html>
<body>
<div style="width:190px;height:100%;position:relative;">
<img src="sample.jpg" style="height:190px; width:190px; position:absolute; margin:-95px 0 0 -95px; left:50%; top:50%;" />
</div>
</body>
</html>
jsfiddle: http : //jsfiddle.net/v6R5J/2/
FIDDLE-另一种方式:
<style>
#Image{
width: 190px;
height: 100%;
background-image: url(sample.jpg);
background-position: center;
background-repeat: no-repeat;
}
</style>
<body>
<div id="Image"/>
</body>
<div style="width:500px;height:500px;border:1px solid #000; text-align: center;">
<img src="http://i.stack.imgur.com/PbkUt.jpg" width="190px" height="190px" style="margin-top: calc(50% - 95px);"/>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.