У меня возникли проблемы центровки элемент , который имеет атрибут 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>
html
css
css-position
centering
user1098278
источник
источник
Ответы:
Если вы установили ширину, вы можете использовать:
источник
Не зная
width
/height
о расположенном элементе 1 , все еще возможно выровнять его следующим образом:ПРИМЕР ЗДЕСЬ
Стоит отметить, что CSS Transform поддерживается в IE9 и выше . (Префиксы поставщиков опущены для краткости)
объяснение
Добавление
top
/left
of50%
перемещает верхний / левый край поля элемента к середине родительского элемента, аtranslate()
функция с (отрицательным) значением-50%
перемещает элемент на половину его размера. Следовательно, элемент будет расположен посередине.Это связано с тем, что процентное значение для
top
/left
properties относится к высоте / ширине родительского элемента (который создает содержащий блок).Хотя процентное значение в функции преобразования относится к ширине / высоте самого элемента (на самом деле это относится к размеру ограничивающего прямоугольника ) .
translate()
Для однонаправленного выравнивания используйте
translateX(-50%)
илиtranslateY(-50%)
.1. Элемент с
position
другим, чемstatic
. Т.е.relative
,absolute
,fixed
значение.источник
position: absolute; left: 50%; transform: translateX(-50%);
вертикальный центрирующий:position: absolute; top: 50%; transform: translateY(-50%);
.translate
свойство, переведите элемент по размеру самого себя , независимо от размера его родителя.Сосредоточение чего-либо в
absolute
позиционировании довольно запутанно в CSS.Измените
margin-left
на (отрицательную) половину ширины элемента, который вы пытаетесь отцентрировать.источник
Разделить вертикально и горизонтально выровненный центр
Примечание: элементы должны иметь ширину и высоту для установки
источник
height
наборе, чтобы это работало.Простой трюк CSS, просто добавьте:
Это работает как с изображениями, так и с текстом.
источник
Если вы хотите центрировать абсолютный элемент
Если вы хотите, чтобы контейнер располагался по центру слева направо, но не сверху вниз
Если вы хотите, чтобы контейнер располагался по центру сверху вниз, независимо от расположения слева направо
Дополнение от 15.12.2015.
Ну, я узнал об этом еще один новый трюк несколько месяцев назад. Предполагая, что у вас есть относительный родительский элемент.
Здесь идет ваш абсолютный элемент.
С этим, я думаю, это лучший ответ, чем мое старое решение. Так как вам не нужно указывать ширину и высоту. Этот он адаптирует содержание самого элемента.
источник
Центрировать элемент «позиция: абсолют».
источник
Это сработало для меня:
источник
по центру позиции: абсолютный атрибут, который нужно установить влево: 50% и поле слева: -50% от ширины делителя.
для абсолютного вертикального центра вам нужно сделать то же самое, но не слева, а сверху. (ПРИМЕЧАНИЕ: html и body должны иметь минимальную высоту 100%;)
и могут быть объединены для обоих
источник
см. демонстрацию на: http://jsfiddle.net/MohammadDayeh/HrZLC/
text-align: center
; работает сposition: absolute
элементом при добавленииleft: 0; right: 0;
источник
Чем проще, тем лучше:
Затем вам нужно вставить ваш тег img в тег, который имеет спортивное положение: относительное свойство, следующим образом:
источник
наверное самый короткий
источник
Если вы не знаете ширину элемента, вы можете использовать этот код:
Демо на скрипке: http://jsfiddle.net/wrh7a21r/
Источник: https://stackoverflow.com/a/1777282/1136132
источник
Или вы можете использовать flex box с абсолютным положением:
источник
Я не уверен, что вы хотите достичь, но в этом случае просто добавив
width: 100%;
к своейul#slideshow li
воле свое дело.объяснение
Эти
img
теги рядный блочные элементы. Это означает, что они текут как текст, но также имеют ширину и высоту, как блочные элементы. В вашем CSS есть дваtext-align: center;
правила, примененных к<body>
и#slideshowWrapper
(что является избыточным, кстати), это делает все дочерние элементы встроенного и встроенного блоков центрированными в их ближайших элементах блока, в вашем коде этоli
теги. Все блочные элементы имеют,width: 100%
если они являются статическими flow (position: static;
), что по умолчанию. Проблема в том, что когда вы указываетеli
тегам бытьposition: absolute;
, вы выводите их из нормального статического потока, и это заставляет их уменьшать свой размер, чтобы они просто соответствовали их внутреннему содержимому, другими словами, они как бы «теряют» своеwidth: 100%
свойство.источник
Использование
left: calc(50% - Wpx/2);
где W ширина элемента работает для меня.источник
Ваши изображения не центрированы, потому что ваши элементы списка не центрированы; только их текст центрирован. Вы можете достичь желаемого положения, центрируя весь список или центрируя изображения в списке.
Пересмотренную версию вашего кода можно найти внизу. В моей ревизии я центрирую список и изображения в нем.
Правда в том, что вы не можете центрировать элемент, который имеет абсолютную позицию.
Но этому поведению можно подражать!
Примечание. Эти инструкции будут работать с любым элементом блока DOM, а не только с img.
Окружите ваше изображение div или другим тегом (в вашем случае это li).
Примечание: имена, данные этим элементам, не являются специальными.
Измените ваши css или scss, чтобы обеспечить абсолютное позиционирование div и центрирование вашего изображения.
И вот оно! Ваш img должен быть в центре!
Ваш код:
Попробуйте это:
Я надеюсь, что это было полезно. Удачи!
источник
Абсолютный объект внутри относительного объекта относительно его родителя, проблема в том, что вам нужна статическая ширина для контейнера
#slideshowWrapper
, а остальная часть решения такая же, как говорят другие пользователиhttp://jsfiddle.net/ejRTU/10/
источник
Вот простое и лучшее решение для центрального элемента с «позицией: абсолют»
источник
Вы можете попробовать так:
источник
Абсолютная позиция удаляет его из потока и помещает в родительский элемент 0x0 (последний элемент блока имеет абсолютную позицию или относительную позицию).
Я не уверен, что именно вы то, что вы пытаетесь достичь, может быть, лучше установить li для a,
position:relative
и это будет центрировать их. Учитывая ваш текущий CSSПроверьте http://jsfiddle.net/rtgibbons/ejRTU/, чтобы поиграть с ним
источник
Я не помню, где я видел метод центрирования, указанный выше, используя отрицательные значения сверху, справа, снизу, слева. Для меня эта техника самая лучшая в большинстве ситуаций.
Когда я использую комбинацию сверху, изображение ведет себя как фоновое изображение со следующими настройками:
Более подробную информацию о первом примере можно найти здесь:
сохранить соотношение сторон div с помощью CSS
источник
То, что, кажется, происходит, есть два решения; по центру с использованием полей и по центру с использованием позиции. Оба работают нормально, но если вы хотите установить абсолютное положение элемента относительно этого центрированного элемента, вам необходимо использовать метод абсолютного положения, поскольку абсолютное положение второго элемента по умолчанию соответствует первому расположенному родительскому элементу. Вот так:
Пока я не прочитал эту публикацию, используя автоматическую маржу: 0, чтобы создать меню слева от моего контента, мне приходилось строить столбец одинаковой ширины справа, чтобы сбалансировать его. Не красиво Спасибо!
источник
Используйте
margin-left: x%;
где x - половина ширины элемента.источник
источник