Нужна помощь 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 работает более подробно.