Выравниевание текста по центру

e1f · September 15, 2008

Подскажите пожалуйста, каким образом можно текст в диве с заданными height && width выровнять во центру по вертикали и горизонтали.

То есть имееется код примерно следующего содержания:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#container {
    width  : 300px;
    height : 300px;
    border : 1px solid green;
}
#inner {
    vertical-align : middle;
    text-align : center;
    width : 100%;
    height : 100%;
}
</style>
</head>
<body>
    <div id="container">
        <div id="inner">Message</div>
    </div>
</body>
</html>

Возможно ли содержимое внутреннего дива выровнять по вертикали? Наружный трогать нельзя...

Victor Ananiev · September 15, 2008

line-height:300px; /*по вертикали*/

text-align:center; /*по горизонтали*/

e1f · September 16, 2008

По горизонтали не проблема, а по вертикали так не пройдет... просто наружный контейнер может иметь произвольный размер, и line-height в пикселах не прокатит...

Нашел способ... но он заведомо неправильный. Вставить внутрь таблицу с height = 100%

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#container {
    width  : 300px;
    height : 300px;
    border : 1px solid green;
}
#inner {
    width : 100%;
    height : 100%;
}
</style>
</head>
<body>
    <div id="container">
        <table id="inner">
            <tbody>
                <tr><td align="center" valign="middle">Message</td></tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Может, есть более корректный способ?

e1f · September 16, 2008

Решил. Помогло это. В результате вышло так:

<style type="text/css">
  #container {
    width   : 300px;
    height  : 300px;
    border  : 1px solid green;
  }
  #inner {
    height     : 100%;
    width      : 100%;
    display    : table;
    text-align : center;
    overflow   : hidden;
  }
  #message {
    display        : table-cell;
    vertical-align : middle;
  }
</style>
<!--[if IE]>
<style type="text/css">
  #inner {
    top      : 50%;
    position : absolute;
  }
  #message {
    top      : -50%;
    position : relative;
  }
</style>
<![endif]-->
<div id="container">
    <div id="inner">
        <div id="message">String with vertical and horizontal alignment</div>
    </div>
</div>

soot · March 18, 2009

e1f said:
Решил. Помогло это. В результате вышло так:

У всех такой способ работает !?

У меня что-то не отображается сама надпись которую нужно центровать

Может в коде ошибка !?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<style type="text/css">
#container {
	width : 300px;
	height : 300px;
	border : 1px solid green;
}
#inner {
	height : 100%;
	width : 100%;
	display : table;
	text-align : center;
	overflow : hidden;
}
#message {
	display : table-cell;
	vertical-align : middle;
}
</style>
<!--[if IE]>
<style type="text/css">
#inner {
top : 50%;
position : absolute;
}
#message {
top : -50%;
position : relative;
}
</style><![endif]-->
</head>
<body>
<div id="container">
  <div id="inner">
	<div id="message">String with vertical and horizontal alignment</div>
  </div>
</div>
</body>
</html>

soot · March 18, 2009

Нашел решение следующие :

<html>
<head>
	<title>Вертикальное выравнивание</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
	<style type="text/css">
		.valign{
			height:200px;
			background-color:#fcc;
			display:table-cell; /* для не IE */
			line-height: expression(this.offsetHeight + "px"); /* для IE */ 
			behavior: expression(!this.extra ? this.extra = this.innerHTML = '<span></span><p>' + this.innerHTML + '</p>' : ''); /* для IE */
		}

		.valign, .valign p{
			vertical-align:middle; /* здесь выравниваем текст по вертикали */ 
		}
		/* для IE */ 
		.valign p{
			line-height:normal;
			display:inline;	
		}
		/* для IE */
		.valign *{
			zoom:1;	 /* Важно! Устанавливаем hasLayout = true */
		}
	</style>
</head>

<body>

<div class="valign">
	Сёги – самая популярная настольная игра в Японии – стране, которая считается Меккой интеллектуальных развлечений, где бережно сохранена целая россыпь замечательных логических игр. И если го, рендзю, отелло широко распространились в мире, то сёги, окончательно сформировавшиеся в XIV веке, до сих пор почти неизвестны за пределами Страны восходящего солнца. Происходит это из-за того, что сёги по происхождению и типу подобны шахматам, занимающим особое место в европейской культуре. Однако сёги это не просто «разновидность шахмат», это одна из старейших интеллектуальных игр, главнейшая особенность которой заключается в том, что захваченные фигуры могут возвращаться на доску на стороне сбившего их игрока.
</div>

</body>
</html>

Edited March 18, 2009 by soot

Sign In

Выравниевание текста по центру

Question

e1f

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Victor Ananiev

Link to comment

Share on other sites

e1f

Link to comment

Share on other sites

e1f

Link to comment

Share on other sites

soot

Link to comment

Share on other sites

soot

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information