html - 使用 HTML 居中图像

Question

我想用 HTML 居中图像。我有我的图像，但不知道该怎么做？我很感激帮助。谢谢。

这是我的代码：

<img src="image.jpg">

Answer 1

随着 HTML5 的出现，您应该考虑使用 CSS 进行图像居中。HTMl5 实际上贬低了对齐标签。

请尝试以下 CSS 代码：

<IMG id="myImage" src="image.jpg" >
<style type="text/css">
    #myImage {
        display: block;
        margin-left: auto;
        margin-right: auto }
</style>

Answer 2

超级简单 - 只需将其包装在一个容器中，并为左右边距自动设置宽度

见：http: //jsfiddle.net/Vc3rY/1/

.container {width: 300px; background: #f2f2f2; margin: 0 auto}

Answer 3

图像是一个内联框，所以 text-align:center; on parent 应该是做到这一点的基本方法。

如果您 display:block, your image ，那么它将是 margin:auto; 这将是那条线上唯一的一件事……如果流中没有浮动元素。（总是很高兴从 101 CSS 规则中了解它是如何工作的 :)）