html - 如何将图像垂直和水平放置在中心/中间

Question

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

如何让图像从这个框的中间开始？ (中间纵横)

Answer 1

有几种方法可以做到这一点，如果它需要在所有浏览器(IE7+ 和其他浏览器)中工作，你需要做不同的事情来让它在某些情况下工作。

1. 使用绝对位置。这仅在您知道图像的大小时才有效。这里你设置为position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image> .

   请参阅此处示例:http://jsfiddle.net/JPch8/

2. 使用 margin: 0 auto;text-align: center;和 line-height/font-size .这有点棘手，因为 line-height 在 IE 中对于像图像这样的内联 block 元素不起作用。这就是字体大小的用武之地。基本上，您将图像容器的行高设置为与容器的高度相同。这将垂直对齐内联元素，但在 IE 中，您需要设置字体大小才能使其正常工作。

   请参阅此处示例:http://jsfiddle.net/JPch8/2/

3. 在支持 display: flex 的现代浏览器中您只需将容器 div 设置为 display: flex; align-items: center; justify-content: center; 即可。

   请参阅此处示例:https://jsfiddle.net/ptz9k3th/