нужна помощь CSS центрирование с абсолютным позиционированием - PullRequest
Новая
       9

нужна помощь CSS центрирование с абсолютным позиционированием

10 голосов
/ 23 июня 2009

Я никогда не был полностью удовлетворен моими различными решениями для центрирования контента на веб-странице. тег <center> устарел еще в середине 18-го века, но я не вижу разумной альтернативы. В частности, я хочу, чтобы родительский DIV был центрирован, но в верхнем левом углу которого я мог бы установить «абсолютно».

Есть ли способ сделать это без использования window.onresize javascript, который все переоценивает? Это кажется довольно простой идеей ... Я хочу, чтобы вещи были абсолютно позиционированы, я просто хочу, чтобы координата 0,0 относилась к чему-то другому, кроме верхнего левого угла окна браузера.

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

Любые мысли по этому поводу очень ценятся.

Ответы [ 9 ]

12 голосов
/ 23 июня 2009 
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>
8 голосов
/ 23 июня 2009

Если вы придерживаетесь 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>

Вы можете настроить ширину и левое поле по мере необходимости (отрицательное левое поле должно составлять половину ширины делителя, который вы центрируете, например. #child.

Как другие люди упоминали, что margin: 0 auto; для элемента с шириной, установленной на нем, будет центрировать его.

6 голосов
/ 22 июня 2013

Это то, что вы ищете? 

<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>
3 голосов
/ 23 июня 2009

Хороший способ для центрирования - использовать тэг "margin: auto". Это работает в FF и Safari. Просто задайте для div некоторую ширину и поле auto, и если родительский элемент имеет ширину 100%, этот div будет выравниваться по центру.

Для того, чтобы это работало в IE, вы должны использовать атрибут text-align: center на родительском элементе, а затем выравнивание текста по левому краю на фактическом центрированном div.

AFAIK, нет способа изменить абсолютные координаты от 0,0 до некоторой другой произвольной точки. Относительный путь.

1 голос
/ 16 октября 2013

Самый простой способ: 

#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/

1 голос
/ 23 июня 2009

Используйте относительное расположение родительского элемента и присвойте этому элементу свойство: 

margin: 0 auto;

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

Пример: 

div#page{
  position:relative;
  width:400px;
  margin:0 auto;
}

div#page #absoluteExample{
  position:absolute;
  top:18px;
  left:100px;
}
1 голос
/ 23 июня 2009

возможно я не понял задачу, но я думаю, что вы можете использовать 

margin: 0 auto;

для центрирования ваших делителей

0 голосов
/ 23 июня 2009

Свойство text-align: center; делает то, к чему привык <center>, и оно значительно превосходит его.

Единственное, это немного сложнее в использовании. Как только вы это освоите, вы удивитесь, почему у вас было столько проблем раньше!

Вы должны использовать его в согласовании со свойствами других элементов на странице. Это проблема, с которой разработчики / дизайнеры сталкиваются с CSS и более новыми технологиями HTML. Это дает нам мощный способ представления элементов нашей страницы, но делает его намного более сложным и строгим.

Ответ Майка Робинсона определенно решает проблему, с которой вы здесь сталкиваетесь, и это отличный пример. Но ...

Не думаю, что какой-либо один ответ покажет вам, как правильно использовать text-align для всех случаев, с которыми вы столкнетесь, но попробуйте разобраться, как позиционирование в CSS работает более подробно.

0 голосов
/ 23 июня 2009

Разве вы не хотите относительное позиционирование, если 0,0 будет относительно div?

...