нужна помощь в центрировании CSS с абсолютным позиционированием
https://stackoverflow.com/questions/1034449
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я никогда не был полностью удовлетворен своими различными решениями по центрированию контента на веб-странице.тот самый <center> тег устарел еще в середине 18 века, но я не вижу разумной альтернативы.В частности, я хочу, чтобы родительский DIV был центрирован, но в верхнем левом углу которого я мог бы установить "абсолютно".
Есть ли способ добиться этого без использования window.onresize javascript, который переоценивает все?Это кажется довольно прямолинейной идеей...Я хочу, чтобы все было абсолютно позиционировано, я просто хочу, чтобы координата 0,0 была относительно чего-то другого, кроме верхнего левого угла окна браузера.
Прямо сейчас, что я делаю, так это устанавливаю div так, чтобы он центрировал свое содержимое, а затем перемещаю его с относительным позиционированием, но это очень утомительно, потому что относительные объекты продолжают толкать друг друга способами, которые мне совершенно не нужны.
Любые мысли по этому поводу очень ценятся.
Решение
Это то, что вы ищете?
<div style=" position: absolute;
display: inline-block;
top: 20%;
bottom: 20%;
right: 20%;
left: 20%;
background-color: #434154;
text-align: center;">
<div style="display: inline-block;
height: 100%;
vertical-align: middle;"></div>
<div style="position: relative;
color: #FFFFFF;
background-color: #546354;
display: inline-block;
vertical-align: middle;">
THIS IS CENTERED WITHOUT SCRIPTING :D
</div>
</div>
Другие советы
body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }
Просто пример кода, но любой элемент .child будет в 0,0 обёртки
Любой абсолютно позиционированный элемент будет абсолютно позиционирован к ближайшему родителю, относящемуся к позиции Если у элемента нет родителя с относительным положением, он просто использует документ. Ниже приведен пример без классов (для ясности добавлены некоторые стили цвета и ширины).
<html>
<body style="text-align: center;">
<div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
<div style="position: absolute; left: 0; top: 0;">
This will absolutely position relative to the container div.
</div>
</div>
<div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
This will absolutely position relative to the document
</div>
</body>
</html>
Если вы придерживаетесь position: absolute;, тогда установите div, к которому вы хотите, чтобы объекты позиционировались, чтобы position: relative; превращался в контекст позиционирования для любых дочерних элементов.
Чтобы центрировать абсолютно позиционированный div, вам нужно знать его ширину, а затем использовать следующий CSS:
#wrapper {
width: 800px;
margin: 0 auto;
position: relative; /* creates a positioning context for child elements */
}
#child {
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px;
}
И HTML:
<div id="wrapper">
<div id="child">
....
</div>
</div>
Вы можете настроить ширину и левое поле по мере необходимости (отрицательное левое поле должно составлять половину ширины div, который вы центрируете, например. #child.
Как уже упоминали другие, использование margin: 0 auto; для элемента с установленной шириной будет центрировать его.
Хороший способ отцентрировать материал - использовать " margin: auto " тег css. Это работает в FF и Safari. Просто задайте для div некоторую ширину и поле auto, и если родительский элемент имеет ширину 100%, этот div будет выравниваться по центру.
Чтобы это работало в IE, вы должны использовать атрибут text-align: center на родительском элементе, а затем выравнивание текста по левому краю на фактическом центрированном элементе div.
AFAIK, нет способа изменить абсолютные координаты от 0,0 до некоторой другой произвольной точки. Относительный путь.
возможно я не понял задачу, но я думаю, что вы можете использовать
margin: 0 auto;
для центрирования ваших div'ов
Используйте относительное позиционирование родительского элемента и присвоите этому же элементу свойство:
margin: 0 auto;
Родительский элемент теперь расположен, и вы должны иметь возможность устанавливать элементы абсолютно внутри него.
Пример:
div#page{
position:relative;
width:400px;
margin:0 auto;
}
div#page #absoluteExample{
position:absolute;
top:18px;
left:100px;
}
Самый простой способ:
#element {
position: absolute; /*Absolute Position*/
top: 0;
left: 0; /*Set the 4 coordinates to zero*/
bottom: 0;
right: 0;
margin: auto; /*Margin to Auto*/
height: 150px; /*Set the Height and Width*/
width:150px;
background:green; /* Backgroung:optional*/
}
Таким образом, он окажется прямо посередине, независимо от его размера.
Надеюсь, это поможет!
Видишь Скрипку: http://jsfiddle.net/kfPC6/
Разве вы не хотите относительное позиционирование, если 0,0 будет относительно div?
Свойство text-align: center; делает то, что раньше <center>, и оно значительно превосходит его.
Единственное, это немного сложнее в использовании. Как только вы это освоите, вы удивитесь, почему у вас было так много проблем раньше!
Вы должны использовать его в согласовании со свойствами других элементов на странице. Это проблема, с которой разработчики / дизайнеры сталкиваются с CSS и более новыми технологиями HTML. Это дает нам мощный способ представления элементов нашей страницы, но делает его намного более сложным и строгим.
Ответ Майка Робинсона определенно решает проблему, с которой вы здесь сталкиваетесь, и это отличный пример. Но ...
Я не думаю, что какой-либо один ответ покажет вам, как правильно использовать text-align для всех случаев, с которыми вы столкнетесь, но попробуйте разобраться, как позиционирование в CSS работает более подробно.
