居中对齐 img css

Question

如何让图片居中左右？

已经尝试了一些不同的东西，但都不想用这个...

CSS：（不工作）

body,html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}

img {
    float: left;
    max-height: 100%;
    max-width: 100%;
    width:auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

jsfiddle DEMO

Answer 1

删除您的 float: left;、margin 并插入 margin: 0 auto;。

Answer 2

http://jsfiddle.net/sq6xwfcy/

body, html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}
img {
    max-height: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

Answer 3

你可以使用这个：

img {
   max-height: 100%;
   max-width: 100%;
   width:auto;
   display: block;
   margin: 0 auto;
}

fiddle

Answer 4

您也可以将 display:inline-block; 设置为 img 并将 text-align:center; 添加到父级。同时设置 height:auto; 以保持响应行为。请参阅下面的 fiddle，了解我会做的所有修改：http://jsfiddle.net/5q7jrwha/2/

Answer 5

删除max-height: 100%; max-width: 100%; 或 width:auto; 或使用以像素为单位的最大尺寸 height: ""px; width: ""px; 删除 float: left; margin-left: auto; margin-right: auto; 使用 margin: 0 auto;

居中对齐 img css

Center align img css

html

css