it-swarm.com.ru

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

У меня проблема с центрированием элемента с атрибутом 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>
573
user1098278
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
1022
baaroz

Не зная width/height позиционируемого1 элемент, все еще можно выровнять его следующим образом:

ПРИМЕР ЗДЕСЬ

.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 зависит от высоты/ширины родительского элемента (который создает содержащий блок).

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

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


1. Элемент с position отличным от static. То есть relative, absolute, fixed значения.

489
Hashem Qolami

Центрирование чего-то absolutely довольно сложно в CSS.

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

}

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

175
bookcasey

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

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

Примечание: элементы должны иметь ширину и высоту для установки

77
Sebin Simon

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

width: 100%;
text-align: center;

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

50
cutez7boyz

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

#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.12.2015

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

Здесь идет ваш абсолютный элемент.

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

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

42
Wesley Brian Lachenal

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

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

чтобы центрировать позицию: абсолютный атрибут, который нужно установить влево: 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 и body должны иметь минимальную высоту 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>
25
Rednas

Центрировать элемент "позиция: абсолют".

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}
19
Vadamadafaka
    <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;

16
Mohammad Dayeh

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

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>
14
Stéphane de Luca

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

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

Источник: https://stackoverflow.com/a/1777282/1136132

7
joseantgv

наверное самый короткий

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

enter image description here

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

Объяснение

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

5
Konstantin Kalbazov

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

5
Julix

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

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

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

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

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

  1. Окружите ваше изображение div или другим тегом (в вашем случае это 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's parent is the body then 100% = the window's 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 должен быть в центре!

Ваш код:

Попробуйте это:

body
{
  text-align : center;
}

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

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  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;
}
<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>

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

4
D3RPZ1LLA

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

3
eveevans

Вот простое и лучшее решение для центрального элемента с "позицией: абсолют"

 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>
3
SantoshK
#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

1
Marian07

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

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

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

1
Ryan Gibbons

Вы можете попробовать так:

* { 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">
          <!--Background-->
            <!--Text-->
                  <div class="text">
                    <p>Random</p>
                  </div>    
        </div>
</body>
</html>
1
Chirag Dave

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

0
Bibaswann Bandyopadhyay

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

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

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

0
Deane Nettles