我有一个问题,居中有一个元素的属性位置设置为绝对。
有人知道为什么这些图像没有居中吗?
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align: center;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: absolute;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}
<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="https://source.unsplash.com/random/300*300?technology" alt="Dummy 1" /></li>
<li><img src="https://source.unsplash.com/random/301*301?technology" alt="Dummy 2" /></li>
</ul>
</div>
</body>
目前似乎有两种解决方案;边距居中,位置居中。这两种工作都很好,但是如果您想要相对于这个居中元素的绝对位置,则需要使用绝对位置方法,因为第二个元素的绝对位置默认为所定位的第一个父元素。像这样:
<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
<p style="line-height:4;">width: 300 px; margin: 0 auto</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
<p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
直到我读到这篇文章,使用边距:0自动技术,在我的内容的左边建立一个菜单,我必须在右边建立一个相同宽度的列来平衡它。不漂亮。谢谢!
1-当你知道绝对定位元素的宽度。
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px
2-当你不知道绝对定位元素的宽度时。响应性很好,但CSS3旧浏览器可能有问题。
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
3-当你不知道绝对定位元素的宽度,但使它的父元素100%宽,这可能不符合设计。
position: absolute;
left: 0;
right: 0;
margin: auto
如果你知道宽度,你也可以使用第三个选项,它将居中。
#parent
{
position : relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25% /* images with aspect ratio: 16:9 */
}
img
{
height: auto!important;
width: auto!important;
min-height: 100%;
min-width: 100%;
position: absolute;
display: block;
/* */
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
我不记得我在哪里看到了上面列出的居中方法,使用负的上、右、下、左值。
对我来说,在大多数情况下,这个技巧是最好的。
当我使用上面的组合时,图像的行为就像一个背景图像,具有以下设置:
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
关于第一个例子的更多细节可以在这里找到:
使用CSS维护div的纵横比