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

当前回答

你可以试试这种方法:

* { margin: 0px; padding: 0px; } #body { height: 100vh; width: 100vw; position: relative; text-align: center; background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); background-size: cover; background-repeat: no-repeat; } .text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; display: inline-block; margin: auto; z-index: 999999; } <html> <body> <div id="body" class="container-fluid">   <div class="text"> <p>Random</p> </div> </div> </body> </html>

2018-01-05 11:29:07

其他回答

#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的纵横比

2016-01-25 18:54:40

在CSS中，居中一些绝对定位的东西是相当复杂的。

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

}

将左边距更改为要居中的元素宽度的一半(负)。

2011-12-14 16:52:50

对于这种情况，我认为下面的代码就足够了:

    ul#slideshow li {
      position: absolute;
      left: 0;
      right: 0;
    }

2021-09-04 01:08:18

使用margin-left: x%;其中x是元素宽度的一半。

2013-07-11 06:43:42

我不确定你想要完成什么，但在这种情况下，只是增加宽度:100%;到你的ul#slideshow li将做的把戏。

解释

The img tags are inline-block elements. This means that they flow inline like text, but also have a width and height like block elements. In your css there are two text-align: center; rules applied to the <body> and to the #slideshowWrapper (which is redundant btw) this makes all inline and inline-block child elements to be centered in their closest block elements, in your code these are li tags. All block elements have width: 100% if they are the static flow (position: static;), which is default. The problem is that when you tell li tags to be position: absolute;, you take them out of normal static flow, and this causes them to shrink their size to just fit their inner content, in other words they kind of "lose" their width: 100% property.

2016-01-25 19:41:19

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

推荐文章

最新文章

标签