发表新帖
发表新帖

How to center a “position: absolute” element

后端 未结
关注
26 3102
-上瘾入骨i
-上瘾入骨i 2020-11-21 05:35

I\'m having a problem centering an element that has the attribute position set to absolute. Does anyone know why the images are not centered?

<
相关标签:
26条回答
  • 無奈伤痛
    2020-11-21 06:04

    An absolute object inside a relative object is relative to its parent, the problem here is that you need a static width for the container #slideshowWrapper , and the rest of the solution is like the other users says

    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/

    0 讨论(0)
  • 轻奢々
    2020-11-21 06:05

    If you don't know the width of the element you can use this code:

    <body>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
        I am some centered shrink-to-fit content! <br />
        tum te tum
    </div>
</div>

    Demo at fiddle: http://jsfiddle.net/wrh7a21r/

    Source: https://stackoverflow.com/a/1777282/1136132

    0 讨论(0)
  • 误落风尘
    2020-11-21 06:05

    What seems to be happening is there are two solutions; centered using margins and centered using position. Both work fine, but if you want to absolute position an element relative to this centered element, you need to use the absolute position method, because the absolute position of the second element defaults to the first parent that is positioned. Like so:

    <!-- 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>

    Until I'd read this posting, using the margin:0 auto technique, to build a menu to the left of my content I had to build a same-width column to the right to balance it out. Not pretty. Thanks!

    0 讨论(0)
  • 栀梦
    2020-11-21 06:07

    I'm not sure what you want to accomplish, but in this case just adding width: 100%; to your ul#slideshow li will do the trick.

    Explanation

    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.

    0 讨论(0)
  • 北海茫月
    2020-11-21 06:09

    To center a “position: absolute” element.

    .your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}
    0 讨论(0)
  • 温柔的废话
    2020-11-21 06:09

    Position absolute takes it out of the flow, and places it at 0x0 to the parent ( Last block element to have a position absolute or position relative ).

    I'm not sure what exactly you what you are trying to accomplish, It might be best to set the li to a position:relative and that will center them. Given your current CSS

    Check out http://jsfiddle.net/rtgibbons/ejRTU/ to play with it

    0 讨论(0)
 看不清?
提交回复
热议问题