Jump to content
  • 0

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


e1f
 Share

Question

Подскажите пожалуйста, каким образом можно текст в диве с заданными 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>

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

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

По горизонтали не проблема, а по вертикали так не пройдет... просто наружный контейнер может иметь произвольный размер, и 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>

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

Link to comment
Share on other sites

  • 0

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

<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>

Link to comment
Share on other sites

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

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

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

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

<!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>

Link to comment
Share on other sites

  • 0

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

<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 by soot
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy