<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>
如何让图片从盒子的中间开始?(垂直和水平都居中)
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>
如何让图片从盒子的中间开始?(垂直和水平都居中)
有几种方法可以实现垂直水平居中,如果需要适用于所有浏览器(包括IE7 +和其他浏览器),您需要采取不同的方法来使其在某些情况下起作用。
使用绝对定位。这仅适用于您知道图像大小的情况。
在这里,您将其设置为position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>
。
使用margin: 0 auto;text-align: center;
和line-height/font-size
。
这有点棘手,因为像图片这样的inline-block元素在IE中line-height工作不正常,这就是font-size发挥作用的地方。
基本上,将图像容器的行高设置为与容器高度相同。这将垂直对齐内联元素,在IE中你需要设置font-size才能使其正常工作。
在现代浏览器中支持display: flex
,您只需将容器div设置为display: flex; align-items: center; justify-content: center;
即可。
HTML:
<div id="photo_leftPanel">
<img src="bla.jpg">
</div>
CSS:
div.photo_leftPanel {
position: relative;
}
div.photo_leftPanel > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
text-align:center;
样式的 <div>
中,不指定盒子的大小。<div class="picture_div" style="margin:0px auto; text-align:center;">
<img src="media/BezierCurve.gif" />
</div>
另外,您可以指定 width
和 height
属性来居中图片(实际上是 div 容器)。
<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
<img src="media/BezierCurve.gif" />
</div>
float:left; position:relative
"可能不会按预期工作。浮动元素被视为绝对定位。height: 100%
可能会影响您的布局的其他部分。<html>
<head><title></title>
<style type="text/css">
html, body {
height: 100%;
}
#photo_leftPanel {
height: 500px; /*guessing*/
width: 604px;
float: left;
}
#photo_leftPanel img {
margin: auto;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>
<div style="display: flex; align-items: center; justify-content: center; width: 600px; height: 600px;">
<img src="bla.jpg">
</div>
希望我理解您试图实现的内容。
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>