Вопрос по css-position, css, html – нужна помощь CSS центрирование с абсолютным позиционированием

10

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

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

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

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

Ваш Ответ

9   ответов
6

<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>
да спасибо Я на самом деле предпочитаю этот ответ тот, который я выбрал. Genia S.
1

margin: 0 auto;

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

3

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

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

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

Вы используете CSS, левый, правый, верхний и нижний свойства для позиционирования элемента, который имеет относительное или абсолютное позиционирование, например. верх: 10 пикселей; перемещает элемент на 10 пикселей от вершины.
1

йте этому элементу свойство:

margin: 0 auto;

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

Пример:

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

div#page #absoluteExample{
  position:absolute;
  top:18px;
  left:100px;
}
8

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; на элементе с шириной, установленной на нем, это будет центр.

1

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

12
body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 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>
это полностью работает, и это именно то, что я искал. Я на Mac, Atm и тестирую в FF и Safari. Работает ли это так же в IE (меня не волнует IE6, только более свежие версии). Genia S.
странно ... я думал, что попробовал этот подход, и он не сработал. Есть ли способ для родительского элемента div принять динамическую высоту своего дочернего элемента div? Я заметил, что когда я устанавливаю родительский цвет bg, если я явно не задаю ему высоту, этот цвет не отображается (даже если дочерние элементы div толкают нижнюю часть родительского элемента вниз). Genia S.
На самом деле нет - смотрите обновление для дальнейшего объяснения
И да, это работает в IE6
только что протестировано в IE ... работает как шарм. Таким образом, ключ ко всему предприятию имеет классы, которые определены как принадлежащие к идентификатору стиля, т.е.: # id.classname Очень интересно. Genia S.
0

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

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

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

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

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

0

если 0,0 будет относительно div?

нет, я хочу, чтобы вещи в этом div имели точные местоположения, но если вы начнете устанавливать вещи как & quot; absolute & quot; они располагаются напротив верхнего левого угла браузера, а не родительского элемента div. Genia S.

Похожие вопросы