Нужна помощь CSS-центрирование с абсолютным позиционированием
Я никогда не был полностью доволен моими различными решениями для центрирования контента на веб-странице. тег <center> устарел еще в середине 18 века, но я не вижу разумной альтернативы. В частности, я хочу, чтобы родительский DIV был центрирован, но в верхнем левом углу я могу установить "абсолютно".
Есть ли способ сделать это, не используя window.onresize javascript, который все еще проверяет? Это похоже на довольно прямолинейную идею... Я хочу, чтобы все было абсолютно позиционировано, я просто хочу, чтобы координата 0,0 была относительно чего-то другого, кроме верхнего левого угла окна браузера.
Сейчас я устанавливаю div, чтобы центрировать его содержимое, а затем лапшу вокруг с относительным позиционированием, но это очень утомительно, потому что относительные объекты продолжают толкать друг друга так, как я совершенно не хочу.
Все мысли по этому поводу очень ценятся.
Ответы
Ответ 1
Это то, что вы ищете?
<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>
Ответ 2
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>
Ответ 3
Если вы придерживаетесь 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; для элемента с установленной шириной, он будет центрировать его.
Ответ 4
У меня хороший способ сосредоточиться на том, чтобы использовать тег "margin: auto" css. Это работает в FF и Safari. Просто дайте div ширину и маржу auto, а если родительский размер равен 100%, то этот div будет центрировать себя.
Для этого в IE вам нужно использовать атрибут text-align: center для родительского элемента, а затем выравнивать по тексту слева на фактическом центрированном div.
AFAIK, нет никакого способа изменить абсолютные координаты от 0,0 до некоторой другой точки арбитража. Относительный путь.
Ответ 5
Возможно, я не понял эту задачу, но думаю, вы можете использовать
margin: 0 auto;
для центрирования ваших div
Ответ 6
Используйте относительное позиционирование для родителя и присваиваем этому же элементу свойство:
margin: 0 auto;
Родитель теперь позиционируется, и вы должны иметь возможность полностью устанавливать элементы внутри него.
Пример:
div#page{
position:relative;
width:400px;
margin:0 auto;
}
div#page #absoluteExample{
position:absolute;
top:18px;
left:100px;
}
Ответ 7
Самый простой способ:
#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*/
}
Это приведет его к середине, независимо от его размера.
Надеюсь, что это поможет!
Смотрите Fiddle: http://jsfiddle.net/kfPC6/
Ответ 8
Вам не нужно относительное позиционирование, если 0,0 будет относиться к div?
Ответ 9
Свойство text-align: center; использует то, к чему привык <center>, и оно значительно превосходит его.
Единственное, это немного сложнее в использовании. Как только вы получите это, вы будете удивляться, почему у вас так много проблем!
Вы должны использовать его в координации со свойствами других элементов на странице. Это проблема разработчиков/дизайнеров с CSS и новыми технологиями HTML. Это дает нам мощный способ представить наши элементы страницы, но делает его намного более сложным и строгим.
Ответ Майка Робинсона, безусловно, решает проблему, с которой вы столкнулись, и это отличный пример. Но...
Я не думаю, что какой-либо один ответ покажет вам, как правильно использовать text-align для всех случаев, с которыми вы столкнетесь, но попробуйте изучить, как позиционирование в CSS работает более подробно.
