如何将图像在垂直和水平方向都居中对齐

Question

如何将图像在垂直和水平方向都居中对齐

19

<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>

如何让图片从盒子的中间开始？（垂直和水平都居中）

- Karem

如果您不需要内联图像，可以考虑使用background-position: center和background-repeat: no-repeat将其添加到div的背景中。 - 2C-B

相关帖子 - 将图像在 div 中居中对齐和在具有响应式高度的 div 中垂直对齐图像 - RBT

6个回答

2

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%);
}

- Mindfield Studio

1

将图片放在一个带有 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>

- Kagan Agun

0

"float:left; position:relative"可能不会按预期工作。浮动元素被视为绝对定位。

要垂直居中图像，您需要在div上设置高度，并且需要在其父级上设置高度。(垂直居中有点麻烦)。如果这些是您唯一的元素，则下面的示例将起作用，但请注意，容器上的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>

- Cfreak

0

一个适用于现代浏览器的解决方案是弹性盒子布局。弹性容器可以配置为在水平和垂直方向上对齐其项目。

<div style="display: flex; align-items: center; justify-content: center; width: 600px; height: 600px;">
    <img src="bla.jpg">
</div>

- William

-2

希望我理解您试图实现的内容。

<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>

- Or Weinberger

@Caspar Kleijne，你说得对，我真的不知道如何在CSS中居中图片。我知道text-align:center，但这对图片有效吗？谢谢。 - Or Weinberger

margin: auto; 或 margin: 0 auto; 如果你只想影响水平对齐。 - Cfreak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Martin Jespersen · Accepted Answer

有几种方法可以实现垂直水平居中，如果需要适用于所有浏览器（包括IE7 +和其他浏览器），您需要采取不同的方法来使其在某些情况下起作用。

使用绝对定位。这仅适用于您知道图像大小的情况。在这里，您将其设置为position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>。

示例请参见：http://jsfiddle.net/JPch8/
使用margin: 0 auto;text-align: center;和line-height/font-size。这有点棘手，因为像图片这样的inline-block元素在IE中line-height工作不正常，这就是font-size发挥作用的地方。基本上，将图像容器的行高设置为与容器高度相同。这将垂直对齐内联元素，在IE中你需要设置font-size才能使其正常工作。

示例请参见：http://jsfiddle.net/JPch8/2/
在现代浏览器中支持display: flex，您只需将容器div设置为display: flex; align-items: center; justify-content: center;即可。

示例请参见：https://jsfiddle.net/ptz9k3th/