Как центрировать div по горизонтали без дисплея: таблица? - PullRequest
Новая
       1

Как центрировать div по горизонтали без дисплея: таблица?

4 голосов
/ 23 ноября 2010

Возможно ли центрировать мультилинию <div> по горизонтали, пока ее содержимое остается выровненным по левому краю (text-align:left), без указания display:table и без необходимости знать ширину пикселя <div> (это должно стать настолько широким, насколько необходимо)? Он должен работать в Firefox 3 и Chrome.

У меня есть следующее рабочее решение, которое содержит <div> внутри другого <div>, поэтому я ищу только решение, которое не нуждается во внутреннем <div>. 

<style type="text/css">
div.showtitle {
  margin-left:auto;  
  margin-right:auto;
  display:table;
}
div.showtitle > div {
  background:#7777ff;
  color:ffffff;
  text-align:left;
  padding:.34em;
  font-size:140%;
}
</style>
<div class="showtitle"><div>Centered div<br>with left-aligned text</div></div>

FYI Причина, по которой display:table и font-size:140% не могут быть объединены в одном и том же <div>, заключается в том, что в Chrome это плохо влияет на высоту строки font-size его контейнера, измененного в JavaScript.

Ответы [ 6 ]

2 голосов
/ 23 ноября 2010

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

.showtitle 
{ 
    with: 350px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: left; 
}

Обновление

Непонятно, что вы имеете в виду, когда хотите, чтобы ширина div была динамической и все же была многострочной. В какой момент содержимое будет перенесено, или вы хотите делать только переносы строк вручную? Если вы делаете перенос содержимого, будет ли div придерживаться 100% после его переноса? Если вы не хотите, чтобы ширина составляла 100%, какова должна быть максимальная ширина?

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

2 голосов
/ 23 ноября 2010 
<div style="margin:0 auto; width:300px">
  Text<br />
  text
</div>
1 голос
/ 23 ноября 2010 
<style>
    #outer {
        text-align: center;
    }
    #inner {
        display: -moz-inline-box; /* Firefox < 3 */
        display: inline-block; /* Standards */
        /* IE < 8, inline + hasLayout */
        *display: inline;
        *zoom: 1;
        text-align: left;
    }
</style>
<div id="outer"><div id="inner">Your centered content here</div></div>
1 голос
/ 23 ноября 2010

Возможно, я неправильно это прочитал, но вы можете просто применить margin: 0 auto; width:960px; к своему элементу showtitle и быть золотым.

1 голос
/ 23 ноября 2010 
<div class="showtitle">Centered div<br>with left-aligned text</div>

с 

.showtitle {
    margin: 0 auto;
    width: ...;
}

должно нормально работать в Firefox и Chrome.

0 голосов
/ 06 декабря 2010

Кажется, что невозможно выполнить выравнивание по центру без display:table или внутреннего <div> или без указания ширины <div>.

...