центральный текст в div - PullRequest
Новая
       5

центральный текст в div

4 голосов
/ 12 марта 2010 
  <div>
<div class="left">
  <div align="center" class="node">
    <div class="nodeText">
      <h2 >test</h2>

  </div>
  <div class="node">
      <h2>test</h2>
  </div>
  <div class="node">
      <h2>test</h2>
  </div>
<div>

Мне нужно центрировать текст в div, кажется, ничего не работает 

.left {
  float:left;
  width:200px;
  border:solid 1px black;
  text-align: center;
}
.node {
  height:200px;
  border:solid 1px black;
  margin:0 auto;
}
.nodeText{
  vertical-align: middle;
}
h2{
     text-align: center;
}

Tnxs

Ответы [ 3 ]

4 голосов
/ 12 марта 2010

Вы имеете в виду вертикальное центрирование, горизонтальное центрирование или оба?

Горизонтальное центрирование встроенного содержимого легко. Просто примените text-align: center к содержащему блоку. Центрирование по горизонтали блока внутри другого блока с помощью CSS обычно выполняется с помощью: 

#centerMe { margin: 0 auto; }

Примечание: в IE6 это требует, чтобы IE находился в режиме «соответствия стандартам», а не в режиме «причуд». Для этого всегда вставьте DOCTYPE в ваш HTML-документ. Например: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Вертикальное центрирование намного хуже.

Возможно, вы захотите взглянуть на Вертикальное центрирование в CSS . Это на самом деле нетривиальная проблема. Используемое вами свойство стиля vertical-align применяется только к ячейкам таблицы (в кросс-браузерной обратной совместимости). Это было бы тривиально сделать со столом за то, что он стоит.

1 голос
/ 12 марта 2010

HTML-код, который вы написали, работает в моем браузере (FF 3.5.8). Однако вам не хватает двух закрывающих тегов <\div>. Возможно, ваш браузер строже моего. Кроме того, <center> не рекомендуется, поэтому старайтесь избегать его, где это возможно.

Я бы поставил все это в комментариях, но мой представитель еще недостаточно высок! : /

0 голосов
/ 12 марта 2010

Попробуйте закрыть .nodeText div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...