Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » CSS+DIV: Как выровнять текст по высоте - по середине?

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

22222



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Приведу простой пример, куча где это необходимо:
<style>
.a {width:300px; height:200px; text-align:center; vertical-align:middle; border:1px black solid;}
</style>
<body>
 
<div class=a>text1</div>
 
</body>
 
 
Текст классно выравнивается по ширине. Но НЕ выравнивается по высоте.  Там же есть свойство vertical-align. Оно не действует ни в IE, ни в FF. Как выровнять текст по высоте так чтобы он был по середине? Есть одна идея, записать внутрь дива таблицу, сделать height=100% и поставить valign=middle. Но это же конкретный изврат.  Как это все сделать по-людски, стилями?

----------
Everyone smiles in the same language.

Всего записей: 446 | Зарегистр. 12-05-2003 | Отправлено: 15:12 24-12-2006 | Исправлено: 22222, 15:16 24-12-2006
Shlakoblok



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Если я не ошибаюсь то div выравнивает только по ширине.
Я бы сделал так:
 
<style>
td.a {width:300px; height:200px; text-align:center; vertical-align:middle; border:1px solid black;}
</style>
<body>
 
<table><tr><td class=a>text1</td></tr></table>
 
</body>

Всего записей: 45 | Зарегистр. 12-12-2006 | Отправлено: 17:58 24-12-2006
afiget



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Установи line-height равной высоте блока, 200px.

Всего записей: 545 | Зарегистр. 31-12-2005 | Отправлено: 01:32 25-12-2006
6epcepk



Silver Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
http://brunildo.org/test/vertmiddle0.html

Всего записей: 2603 | Зарегистр. 02-05-2003 | Отправлено: 01:39 25-12-2006
22222



Full Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
6epcepk
 
100 баллов! Спасибо!

----------
Everyone smiles in the same language.

Всего записей: 446 | Зарегистр. 12-05-2003 | Отправлено: 10:38 25-12-2006 | Исправлено: 22222, 10:42 25-12-2006
Botovskiu

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А КАК СДЕЛАТЬ по горизонтали ?

Всего записей: 124 | Зарегистр. 20-10-2011 | Отправлено: 07:12 07-08-2012
ubian



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Botovskiu
text-align: center; - не?

Всего записей: 623 | Зарегистр. 22-07-2011 | Отправлено: 13:20 08-08-2012
mcmimik



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Чтобы выровнять текст по вертикали и горизонтали, используйте flex и margin:auto, подробно описано тут:
http://pepelsbey.net/2013/05/flexbox-gotcha/
 
Пример:

Код:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
    height:100%;
    width:100%;
    margin:0;
    display:flex;
}
p {
    margin:auto;
    font-size: 2em;
}
</style>
</head>
<body>
    <p>Hello, World.</p>
</body>
</html>

Всего записей: 1 | Зарегистр. 23-06-2009 | Отправлено: 04:47 12-11-2013 | Исправлено: mcmimik, 04:48 12-11-2013
victoriabonya1978

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
ЗДесь есть 2 варианта:
1. С помощью  padding-top, padding-bottom
2. С помощью line-height:вісота блока




Нет смысла отвечать на сообщения 7+ летней давности.

Всего записей: 11 | Зарегистр. 25-02-2020 | Отправлено: 19:32 25-02-2020
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » CSS+DIV: Как выровнять текст по высоте - по середине?


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2020

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru