не работает цсс: text-align

sashabmv · January 5, 2011

Здравствуйте. Проблемка такая:

Есть див со стилем text-align: right;. Внутри него второй див с тектом. Так вот, внутренний див не хочет выравниваться по правой стороне. В чем тут может быть дело?

вот код:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" >
<head>
<!— <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 —>
  <title>Ïðèâåò</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<div style = "background: lime; width: 200px; height: 300px; text-align: right; border:2px; border-style:solid; margin: 10px 10px;">
	<div style = "border: 1px; background: red; width: 80px; height: 50px; text-align:left; vertical-align: middle; text-align: center;">
		tru-lalala
	</div>
</div>

</body>
</html>

Shift-Web · January 5, 2011

float: right;

sigma77 · January 5, 2011

sashabmv

Это свойство относится только к строчным элементам.

Для блоков используйте свойство float.

sashabmv · January 5, 2011

Да, точно. Спасибо. Я это знал, только из головы вылетило. И вот почему. Сейчас попытаюсь показать фокус:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" >
<head>
  <title>Ïðèâåò</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>

<div style = "background: lime; width: 200px; height: 300px; border:2px; border-style:solid; margin: 10px 10px; text-align: center;">
	<div style = "border: 1px; background: red; width: 80px; height: 50px; text-align:left; vertical-align: middle; text-align: center;">
		tru-lalalal
	</div>
</div>

</body>
</html>

Так вот, эта штука прекрасно работеат в IE8. Внутренний див, о чудо, выровнялся строго по центру. Без всяких float. Почему?

Но в firefox это уже не работает.

Собственно, у меня задача и состоит в том, чтобы выровнять внутренний див по центру относительно внешнего. Как это можно сделать проще всего?

sigma77 · January 5, 2011

Так вот, эта штука прекрасно работеат в IE8. Внутренний див, о чудо, выровнялся строго по центру. Без всяких float. Почему?
Но в firefox это уже не работает.
Собственно, у меня задача и состоит в том, чтобы выровнять внутренний див по центру относительно внешнего. Как это можно сделать проще всего?

Причина в доктайпе. При таком доктайпе ИЕ переходит в режим совместимости.

Почитаете тут немного подробнее, правда на английском языке.

Для размещения по центру при заданной ширине, используйте margin: 0 auto;

sashabmv · January 5, 2011

Спасибо. Помогло. Сам бы не догадался до "margin: 0 auto;"

Да, в доктайпе нету url'a, поэтому он, видимо, и переходит в режим совместимости. Только получается, что когда-то text-align:center обрабатывался как нужно, а теперь это из современных стандартов убрали. Так что ли.

Sign In

не работает цсс: text-align

Question

sashabmv

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Shift-Web

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

sashabmv

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

sashabmv

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information