如何使图像居中？

【问题标题】：How to center an image?如何使图像居中？
【发布时间】：2016-04-23 14:32:35
【问题描述】：

我在这个问题上苦苦挣扎了一段时间。我的风景图像看起来很棒，但我无法让我的纵向图像正确对齐。这是我的代码，自动边距和填充似乎根本没有效果，图像总是与滑块（父元素）的左侧对齐。

.slider img#portrait { 
        min-height: 100%; 
        width: auto; 
        margin: 0 auto;
        padding: 0 auto;
        }

【问题讨论】：

如果您不修改图像的display 属性，则将text-align: center; 添加到.slider。否则使用下面@charliesd 发布的答案

标签： html css image responsive-design responsive-images

【解决方案1】：

我设法从不同的来源找到了一些可以解决问题的方法，因此我想将我在这里使用的所有方法都包含在一个地方。

这就是我现在所拥有的，效果很好：

.slider img#portrait { 
        height: auto; 
        width: 50%; 
        display: block;
        float: none;
        position: relative;
        margin: 0 auto;
        padding: 0 auto;
        }

图像默认显示为内联块元素。所以把这个改成display: block;

如果有float: left;，那么规则margin: auto;也无效，所以设置float: none;

除非图像具有设置的宽度，否则边距自动将不起作用width: 50%;

别忘了设置position: relative;

如果您不修改图像的显示属性，则可以使用：.slider {text-align: center;}。（仅适用于父元素。）

【讨论】：