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

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

Ответы

Ответ 1

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

Ответ 2

Не зная 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 Transform поддерживается в IE9 и выше. (Префиксы поставщика опущены для краткости)

Описание

Добавление top/left 50% перемещает верхний/левый край края от элемента до середины родительского элемента, а translate() функция с (отрицательным) значением -50% перемещает элемент на половину его размера. Следовательно, элемент будет располагаться посередине.

Это связано с тем, что процентное значение для свойств top/left относится к height/width родительского элемента (который создает содержащий блок).

Хотя процентное значение translate() transform зависит от ширины/высоты сам элемент (на самом деле это относится к размеру рамки ).

Для однонаправленного выравнивания используйте translateX(-50%) или translateY(-50%).

^{1. Элемент с a position, отличный от static. То есть relative, absolute, fixed.}

Ответ 3

Центрирование чего-то absolute ly позиционируется довольно запутанно в CSS.

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

}

Измените margin-left на (отрицательный) на половину ширины элемента, который вы пытаетесь центрировать.

Ответ 4

Div вертикально и горизонтально выровненный центр

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

Примечание. Элементы должны иметь ширину и высоту, которые необходимо установить

Ответ 5

Простой трюк CSS, просто добавьте:

width: 100%;
text-align: center;

Это работает как с изображениями, так и с текстом.

Ответ 6

Если вы хотите центрировать абсолютный элемент

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Если вы хотите, чтобы контейнер был центрирован слева направо, но не сверху вниз

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Если вы хотите, чтобы контейнер был центрирован сверху вниз, независимо от того, остался ли он справа

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Обновление от 15 декабря 2015 г.

Хорошо, я узнал об этом еще один новый трюк несколько месяцев назад. Предполагая, что у вас есть относительный родительский элемент.

Вот ваш абсолютный элемент.

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

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

Ответ 7

чтобы центрировать позицию a: абсолютный атрибут, который вам нужно установить слева: 50% и margin-left: -50% от ширины div.

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

для абсолютного абсолютного абсолютного абсолютного вам нужно сделать то же самое, что и булочка, а не левая с вершиной. (ПРИМЕЧАНИЕ: html и тело должны иметь минимальную высоту 100%;)

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

и могут быть объединены как для

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>

Ответ 8

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

см. демонстрацию: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; работает с элементом position: absolute при добавлении left: 0; right: 0;

Ответ 9

Чем проще, тем лучше:

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>

Ответ 10

Это сработало для меня:

position: absolute;
left: 50%;
transform: translateX(-50%);

Ответ 11

Если вы не знаете ширину элемента, вы можете использовать этот код:

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

Демо на скрипке: http://jsfiddle.net/wrh7a21r/

Источник: fooobar.com/questions/11977/...

Ответ 12

Я не уверен, чего вы хотите достичь, но в этом случае просто добавление width: 100%; к вашему ul#slideshow li сделает трюк.

Объяснение

Теги img - это элементы встроенного блока. Это означает, что они текут как встроенный текст, но также имеют ширину и высоту, подобные элементам блока. В вашем css есть два правила text-align: center;, применяемые к <body> и к #slideshowWrapper (что является избыточным btw), что делает все дочерние элементы inline и inline-block центрированными в их ближайших блочных элементах, в вашем коде это теги li. Все элементы блока имеют width: 100%, если они являются статическим потоком (position: static;), который по умолчанию. Проблема заключается в том, что когда вы указываете тегам li как position: absolute;, вы вынимаете их из обычного статического потока, и это заставляет их уменьшать размер, чтобы просто соответствовать их внутреннему контенту, другими словами, они вроде как "теряют", их свойство width: 100%.

Ответ 13

Использование left: calc(50% - Wpx/2); где W - это ширина элемента для меня.

Ответ 14

Абсолютный объект внутри относительного объекта относительно его родителя, проблема здесь в том, что вам нужна статическая ширина для контейнера #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/

Ответ 15

Это простое и лучшее решение для центрального элемента с "position: absolute"

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }

<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

Ответ 16

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

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

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

Ответ 17

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

Пересмотренную версию вашего кода можно найти внизу. В моей ревизии я располагаю как список, так и изображения внутри него.

Истина заключается в том, что вы не можете центрировать элемент, который имеет позицию, установленную в абсолютную.

Но это поведение можно подражать!

Примечание. Эти инструкции будут работать с любым элементом блока DOM, а не только с img.

1) Окружайте свое изображение с помощью div или другого тега (в вашем случае a li).

    <div class="absolute-div">
      <img alt="my-image" src="#">
    </div>

Примечание. Имена, присвоенные этим элементам, не являются особенными.

2) Измените свой css или scss, чтобы дать абсолютное позиционирование div и ваше изображение в центре.

    .absolute-div {
      position: absolute;

      width: 100%; 
      // Range to be centered over. 

      // If this element parent is the body then 100% = the window width

      // Note: You can apply additional top/bottom and left/right attributes
      // i.e. - top: 200px; left: 200px;

      // Test for desired positioning.
    }

    .absolute-div img {
      width: 500px;
      // Note: Setting a width is crucial for margin: auto to work.

      margin: 0 auto;
    }

И вот оно! Ваш img должен быть центрирован!

Ваш код:

Попробуйте следующее:

    <style type="text/css">

    body {
      text-align: center;
      text: inherit;
    }

    #slideshow {
        list-style: none;
        margin-top: 50px;
        width: 800px; 
        // alter to taste

        margin: 0 auto
    }

    #slideshow li {
        position: absolute;
    }

    #slideshow img {
        border: 1px solid #ccc;
        padding: 4px;
        height: 450px;
        width: auto;
        // This sets the width relative to your set height.

        // Setting a width is required for the margin auto attribute below. 

        margin: 0 auto;
    }

    </style>
    <body>
      <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>
    </body>

Надеюсь, это было полезно. Удачи!

Ответ 18

#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;

Более подробную информацию о первом примере можно найти здесь: Поддерживать соотношение сторон div с CSS

Ответ 19

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

Ответ 20

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

<!-- 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, чтобы построить меню слева от моего содержимого, мне пришлось построить столбец одинаковой ширины справа, чтобы сбалансировать его. Не красиво. Спасибо!

Ответ 21

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>