如何居中图像？

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; 
     } 

图像被显示为inline-block的元素默认。因此，将其更改为display: block;

如果有一个float: left;则该规则margin: auto;不会有任何效果要么，所以设置float: none;

保证金自动将没有任何效果或者除非像有一组宽度，以便width: 50%;

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

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