如何将“位置：绝对”元素居中
如何将“位置：绝对”元素居中
positionabsolute
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="img/dummy1.JPG" alt="Dummy 1" /></li>
<li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
</ul>
</div>
</body>
HUX布斯浏览 442回答 3
3回答
-
当年话下
position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0; -
有只小跳蛙
不知道width/height定位1元素，仍然可以按以下方式对齐它：这里的例子.child { position: absolute; top: 50%; /* position the top edge of the element at the middle of the parent */ left: 50%; /* position the left edge of the element at the middle of the parent */ transform: translate(-50%, -50%); /* This is a shorthand of translateX(-50%) and translateY(-50%) */}值得注意的是CSS变换 在IE9及以上版本中支持. (为简洁起见省略供应商前缀)解释加法top/left的50%将元素的上/左边缘移动到父元素的中间，并且translate()函数的(负)价值-50%将元素移动其大小的一半。因此，元素将位于中间。这是因为top/left属性相对于父元素的高度/宽度(该元素正在创建包含块)。而百分比值translate() 变换函数与元素本身的宽度/高度有关。(实际上它指的是包围盒).对于单向对齐，请使用translateX(-50%)或translateY(-50%)相反。1.具有position除static..即。relative, absolute, fixed价值。 -
慕工程0101907
以某物为中心absoluteLY定位在CSS中是相当复杂的。ul#slideshow li { position: absolute; left:50%; margin-left:-20px;}变化margin-left为(负)一半的元素的宽度，您正试图居中。
随时随地看视频慕课网APP
Html/CSS
JavaScript