如何使图像居中?

How to center an image?

我在这个问题上纠结了一段时间。我的横向图像看起来不错,但我无法使纵向图像正确对齐。这是我的代码,自动边距和填充似乎根本没有效果,图像总是对齐到滑块(父元素)的左侧。

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

我设法从不同的来源找到了可能解决问题的小片段,所以我想将我在此处使用的所有片段都放在一个地方。

这是我现在拥有的效果很好的:

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

图像默认显示为 inline-block 个元素。所以将其更改为 display: block;

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

除非图像具有设置的宽度,否则边距自动将无效,因此 width: 50%;

并且不要忘记设置 position: relative;

如果您不修改图像的显示 属性 那么您可以使用:.slider {text-align: center;}。 (仅适用于父元素。)