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

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

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 ]

14 голосов
/ 14 февраля 2014

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

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>
7 голосов
/ 30 декабря 2014

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

<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

6 голосов
/ 19 ноября 2018

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

position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;
5 голосов
/ 09 января 2017

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

5 голосов
/ 25 января 2016

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% собственность.

4 голосов
/ 14 декабря 2013

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

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

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

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

Примечание. Эти инструкции будут работать с любым элементом блока 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>

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

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

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

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

 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>
1 голос
/ 05 января 2018

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

* { 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 голос
/ 25 января 2016 
#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

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