Как центрировать элемент «позиция: абсолют» - PullRequest
Новая
       78

Как центрировать элемент «позиция: абсолют»

582 голосов
/ 14 декабря 2011

У меня проблема с центрированием элемента с атрибутом 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>

Ответы [ 24 ]

1 голос
/ 14 декабря 2011

Абсолютная позиция извлекает его из потока и помещает в родительский элемент 0x0 (последний элемент блока имеет абсолютную позицию или относительную позицию).

Я не уверен, что именно вы пытаетесь достичь. Возможно, лучше установить li на position:relative, и это отцентрирует их. Учитывая ваш текущий CSS

Проверьте http://jsfiddle.net/rtgibbons/ejRTU/, чтобы поиграть с ним

0 голосов
/ 24 августа 2014

То, что, кажется, происходит, есть два решения;по центру с использованием полей и по центру с использованием позиции.Оба работают нормально, но если вы хотите установить абсолютное положение элемента относительно этого центрированного элемента, вам необходимо использовать метод абсолютного положения, поскольку абсолютное положение второго элемента по умолчанию соответствует первому расположенному родительскому элементу.Примерно так: 

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

Пока я не прочитал эту публикацию, используя автоматическую методику margin: 0, чтобы создать меню слева от моего контента, мне приходилось строить столбец такой же ширины справачтобы сбалансировать это.Не красивоСпасибо!

0 голосов
/ 27 сентября 2017 

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>
0 голосов
/ 11 июля 2013

Используйте margin-left: x%;, где x - половина ширины элемента.

Страница:
...