我在这个问题上挣扎了一段时间。我的风景图像看起来很棒,但我无法让我的纵向图像正确对齐。这是我拥有的代码,自动边距和填充似乎根本没有效果,图像将始终与滑块(父元素)的左侧对齐。
.slider img#portrait {
min-height: 100%;
width: auto;
margin: 0 auto;
padding: 0 auto;
}
我在这个问题上挣扎了一段时间。我的风景图像看起来很棒,但我无法让我的纵向图像正确对齐。这是我拥有的代码,自动边距和填充似乎根本没有效果,图像将始终与滑块(父元素)的左侧对齐。
.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;}
. (仅适用于父元素。)