首页猿问如何将“位置：绝对&r...

如何将“位置：绝对”元素居中

Html/CSS JavaScript

HUX布斯 2019-06-20 10:45:50

如何将“位置：绝对”元素居中我在对具有属性的元素的中心设置一个问题position设为absolute..有人知道为什么图像没有居中吗？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>

查看完整描述

3 回答

当年话下

TA贡献1890条经验获得超9个赞

position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;

反对回复 2019-06-20

有只小跳蛙

TA贡献1824条经验获得超8个赞

不知道width/height定位¹元素，仍然可以按以下方式对齐它：

这里的例子

.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价值。}

反对回复 2019-06-20

慕工程0101907

TA贡献1887条经验获得超5个赞

以某物为中心absoluteLY定位在CSS中是相当复杂的。

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;}

变化margin-left为(负)一半的元素的宽度，您正试图居中。

反对回复 2019-06-20

3 回答
0 关注
441 浏览

关注

如何将“位置：绝对”元素居中

如何将“位置：绝对”元素居中

3 回答

解释

相关问题推荐

添加回答

热搜

最近搜索清空

如何将“位置：绝对”元素居中

如何将“位置：绝对”元素居中

3 回答

解释

相关问题推荐

添加回答