居中图像水平div
我有一个img在div（ class="top_image" ），我想这个图像正好在div的中间，但没有我尝试的作品…
谢谢你的帮助！
这里发布的每个解决scheme都假定您知道img的维度， 这不是一个常见的情况。 而且，将这些尺寸植入解决scheme是痛苦的。
简单地设置：
display: block /*for the img inside your div */ margin-left: auto margin-right: auto
要么
display: block /*for the img inside your div */ margin: 0 auto
就这样。
请注意，您还必须为外部div设置初始min-width 。
文本alignment：中心将只适用于水平居中。 为了在整个中心，垂直和水平，你可以做到以下几点：
div { position: relative; } div img { position: absolute; top: 50%; left: 50%; margin-left: [-50% of your image's width]; margin-top: [-50% of your image's height]; }
W3C提供了一个非常简单和优雅的解决scheme。 简单地使用margin：0自动声明如下：
.top_image img { margin:0 auto; }
来自W3C的更多信息和例子 。
<div class="outer"> <div class="inner"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s320/tall+copy.jpg" alt="tall image" /> </div> </div> <hr /> <div class="outer"> <div class="inner"> <img src="http://www.5150studios.com.au/wp-content/uploads/2012/04/wide.jpg" alt="wide image" /> </div> </div>
CSS
img { max-width: 100%; max-height: 100%; display: block; margin: auto auto; } .outer { border: 1px solid #888; width: 100px; height: 100px; } .inner { display:table-cell; height: 100px; width: 100px; vertical-align: middle; }
我认为它更好地做文本alignmentdiv的中心，让图像照顾的高度。 只需指定div的顶部和底部填充以在图像和div之间有空格。 看看这个例子： http : //jsfiddle.net/Tv9mG/
我希望这会有所帮助：
.top_image img{ display: block; margin: 0 auto; }
这花了我太多的时间来弄清楚。 我不能相信没有人提到中心标签。
例如：
<center><img src = "yourimage.png"/></center>
如果你想调整图像的百分比：
<center><img src = "yourimage.png" width = "75%"/></center>
GG美国
