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

Что является самым простым способом выровнять div, чья позиция relative горизонтально и вертикально с использованием CSS? Ширина и высота div неизвестны, то есть она должна работать для каждого измерения div и во всех основных браузерах. Я имею в виду выравнивание по центру.Перекрестное выравнивание центра обозревателя с помощью CSS

Я думал сделать горизонтальное выравнивание с помощью:

margin-left: auto; 
margin-right: auto;

, как я сделал here.

Является ли это хорошим решением для перекрестного браузера для горизонтального выравнивания?

Как я могу выполнить вертикальное выравнивание?

источник

2010-05-29 Misha Moroshko

Когда вы говорите выравнивание, неясно, с чем вы хотите выровнять div. Вы имеете в виду центр div? –

Вы хотите вертикально выровнять div в центре – Starx

К сожалению, я имею в виду выравнивание по центру. –

Горизонтальное центрирование возможно только в том случае, если известен элемент width, иначе браузер не может определить, с чего начать и завершить.

#content { 
    width: 300px; 
    margin: 0 auto; 
}

Это идеально подходит для кроссбраузеров.

Вертикальное центрирование возможно только в том случае, если элемент расположен абсолютно и имеет известное значение height. Однако абсолютное позиционирование должно было бы разорваться на margin: 0 auto;, поэтому вам нужно подойти по-другому. Вы должны установить его top и left к 50% и margin-top и margin-left к отрицательной половине его width и height соответственно.

Вот copy'n'paste'n'runnable пример:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2935404</title> 
    </head> 
    <style> 
     #content { 
      position: absolute; 
      width: 300px; 
      height: 200px; 
      top: 50%; 
      left: 50%; 
      margin-left: -150px; /* Negative half of width. */ 
      margin-top: -100px; /* Negative half of height. */ 
      border: 1px solid #000; 
     } 
    </style> 
    <body> 
     <div id="content"> 
      content 
     </div> 
    </body> 
</html>

Это говорит, вертикальная центровка обычно применяется редко в реальном мире.

Если ширина и высота действительно заранее неизвестна, то вам нужно захватить Javascript/JQuery, чтобы установить значения по margin-left и margin-top и жить с тем, что клиент будет видеть ДИВ быстро смещаться во время загрузки страницы, которая может вызвать "wtf?" опыт.

источник

2010-05-29 14:47:26 BalusC

Обратите внимание, что для этого необходимо запустить IE в режиме стандартов (в режиме Quirks, Вам придется использовать 'text-align: center' в родительском элементе, чтобы центрировать div горизонтально). –

Режим Quirks никогда не является вариантом для современных веб-страниц, поэтому его не стоит рассматривать. – Rob

@Rob: хотя я ненавижу начать пламенную войну об этом (никто не умирает из режима Quirks), мне когда-то пришлось использовать режим Quirks в веб-приложении, чтобы использовать [box box box model] (http: // www .quirksmode.org/css/box.html) в IE. –

«Вертикальное центрирование возможно только в том случае, если элемент расположен абсолютно и имеет известную высоту». - Это утверждение неверно.

Вы можете использовать display:inline-block; и его возможность выровнять по вертикали в поле его родителя. Этот метод позволяет выровнять элемент, не зная его высоты и ширины, хотя он требует, чтобы вы, по крайней мере, знали высоту родителя.

Если ваш HTML это;

<div id="container"> 
    <div id="aligned-middle" class="inline-block">Middleman</div> 
    <div class="strut inline-block">&nbsp;</div> 
</div>

И ваш CSS является:

#container { 
    /* essential for alignment */ 
    height:300px; 
    line-height:300px; 
    text-align:center; 
    /* decoration */ 
    background:#eee; 
} 
    #aligned-middle { 
     /* essential for alignment */ 
     vertical-align:middle; 
     /* decoration */ 
     background:#ccc; 
     /* perhaps, reapply inherited values, so your content is styled properly */ 
     line-height:1.5; 
     text-align:left; 
    } 
    /* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */ 
    #container .strut { 
     /* parent's height */ 
     height:300px; 
    } 
.inline-block { 
    display:inline-block; 
    *display:inline;/* for IE < 8 */ 
    *zoom:1;/* for IE < 8 */ 
}

Тогда # выровнен среднего будет сосредоточено в #container. Это самое простое использование этой техники, но с ней приятно познакомиться.

Правила, обозначенные знаком «/ * для IE < 8 * /", должны быть помещены в отдельный стилизованный лист с использованием условных комментариев.

Вы можете просмотреть рабочий пример этого здесь: http://jsfiddle.net/UXKcA/3/

редактировать: (именно этот фрагмент тестировался в IE6 и ff3.6, но я использую это много, это довольно кросс-браузер, если потребуется. поддержка фф < 3, вам также необходимо добавить display:-moz-inline-stack; под display:inline-block; в .inline-block правила.)

источник

2010-05-29 17:19:26

«Если ширина и высота действительно заранее неизвестна, то вам нужно захватить Javascript/JQuery, чтобы установить margin-left и margin-top и жить с тем, что клиент увидит, что div быстро будет , сдвинутым во время загрузки страницы, что может вызвать «wtf?». »

Вы можете .hide() в DIV, когда DOM готов, дождитесь загрузки страницы, установите DIV margin-left и margin-top значения, и .show() в DIV снова.

$(function(){ 
    $("#content").hide(); 
)}; 
$(window).bind("load", function() { 
    $("#content").getDimSetMargins(); 
    $("#content").show(); 
});

источник

2011-09-26 23:53:55 nickarmstronggr

неправильная практика, но если allready, спрячьте его в css и покажете только при загрузке jq. – Dementic

Проверить это Demo jsFiddle

Установить следующие две вещи

HTML значение Align атрибут центр
CSS маржа налево и запас правого стоимостных свойств установите авто

CSS

<style type="text/css"> 
    #setcenter{ 
      margin-left: auto; 
      margin-right: auto;  
      // margin: 0px auto; shorthand property 
    } 
</style>

HTML

<div align="center" id="setcenter"> 
    This is some text! 
</div>

источник

2014-03-03 12:40:50

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

ответ

Смежные вопросы