2010-03-12 5 views
4
<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

ответ

4

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

Горизонтальное центрирование inline Содержание очень простое. Просто примените 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"> 

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

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

+0

text-align для IE ... другие браузеры могут использовать: margin: 0 auto; – Chris

0

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

+0

Это показывает, что одна из первых вещей, которые нужно делать при столкновении с странным поведением CSS, - это проверка HTML. :) – Fuzzy76

1

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

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

+0

используя хром и попробованное центрирование firefox не работает в их основе –

+3

'<\div>' eh? .... – mpen

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