如何将“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="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>

当前回答

将“position: absolute”元素居中。

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}

2018-04-08 23:35:26

其他回答

只需在父元素上使用display: flex和justify-content: center即可

body { text-align: center; } #slideshowWrapper { margin-top: 50px; text-align: center; } ul#slideshow { list-style: none; position: relative; margin: auto; display: flex; justify-content: center; } ul#slideshow li { position: absolute; } ul#slideshow li img { border: 1px solid #ccc; padding: 4px; height: 100px; } <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>

您可以在JSFIDDLE中找到这个解决方案

2020-08-26 17:11:41

相对对象中的绝对对象是相对于它的父对象的，这里的问题是你需要一个静态宽度容器#slideshowWrapper，其余的解决方案就像其他用户说的

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

2011-12-14 17:06:57

越简单越好:

img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}

然后你需要将你的img标签插入到一个运动位置:相对属性的标签中，如下所示:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

2014-02-14 15:32:47

或者你现在可以使用flex box与位置绝对:

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}

2019-11-14 14:17:14

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

参见demo: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align:中心;工作与位置:绝对元素时添加左:0;右:0;

2014-05-24 01:49:11

如何将“position: absolute”元素居中

推荐文章

最新文章

标签