Question

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

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

Answer 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;}。（仅在应用于父元素时才有效。）

如何居中图像？

1 个答案: