| |
|
|
| | Как сделать блок <div> по центру тегом HTML или CSS
<center> - Размещает вверху почему-то
<html> <head><.head>
<body><div> <center>
Центр
</center> </div> </body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Сашинька
(14.08.2011 в 16:13)
| | | Во-первых, тег <CENTER> объявлен устаревшим и не рекомендуемым к использованию ещё в спецификации HTML4.01 в 1999 году, 12 лет назад.
Во-вторых, той же спецификацией было объявлено нерекомендуемым использование атрибута ALIGN (с любым значением - left | center | right | justify) во всех тегах, кроме табличных.
Взамен тега <CENTER> (либо атрибута ALIGN в родительском теге) следует использовать свойство стиля text-align.
Однако, следует понимать, что и тег <CENTER>, и атрибут ALGN, и свойство стиля text-align устанавливают ГОРИЗОНТАЛЬНОЕ выравнивание содержимого.
-------
ВЕРТИКАЛЬНОЕ выравнивание (с помощью атрибута VALIGN со значениями top | middle | bottom | baseline) возможно ТОЛЬКО в табличных тегах <COL>, <COLGROUP>, <TBODY>, <TD>, <TFOOT>, <TH>, <THEAD> и <TR>.
Кроме того, существует свойство стиля vertical-align, но и оно работает только и исключительно в вышеперечисленных табличных тегах (и в тегах линейного стиля).
-------
Таким образом, выравнивание по вертикали в блоке возможно только в таблице(ячейке).
Это и есть ответ на ваш вопрос.
-------
Однако, используя CSS, это можно сделать элементарным образом практически для любого тега, задав ему свойство display: table-cell
Для вашего случая:
<style type="text/css">
div.cell {
display: table-cell;
width: 300px;
height: 100px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
</style>
<div class="cell">Центр</div>
|
-------
Есть и ещё один способ, но работает он только для однострочного текстового содержимого:
<style type="text/css">
div.singlstring {
width: 300px;
height: 100px;
border: 1px solid black;
text-align: center;
line-height: 100px;
}
</style>
<div class="singlstring">Центр</div>
|
| |
| |
|
|
| |
|
|
| |
для: АЯ
(14.08.2011 в 16:42)
| | | Спасибо, очень познавательно. Но мне хочется по центру окна выравнять блок(допущена мной не точность в описании) | |
| |
|
|
|
| |
|
|
| |
для: АЯ
(14.08.2011 в 17:27)
| | | Охх. Как интерересно.
Нет, не получается.
Там все отсчитывается о краев: top | left
Если блок большой, то при изменении размера окна, видно, что край по центру, а центр блока не в центре окна
http://www.w3school.ru/blog/css/how-to-center-an-object-exactly-in-the-center.html
http://e.mail.ru/cgi-bin/editnotify
Пример, если щелкнуть по кнопке добавить. Центр окошечка, при изменении размеров окна браузера, всегда по центру окна браузера (влево чуть не срабатывает, а при закрывании в верх все тип-топ) | |
| |
|
|
