[css] Вертикальное выравнивание - Веб-программирование

rootus · 08.08.2005, 19:22

Народ мож кто занет как выровнить текст в блоке <div>Some text</div> по вертикали, vertical-align не даёт никакого эффекта.

Hatifnatt · 08.08.2005, 23:29

Цитата:

rootus:
vertical-align не даёт никакого эффекта

Как это не дает эффекта? Ты примерчик приведи (кусок своего кода), тогда и говорит можно будет, а то не понятно в каком случае нет эффекта, может у тебя случай какой-нибудь особенный, vertical-align должно давать эффект. Только вот такой вопрос.
В твоем примере одна строчка, что там можно выровнять по вертикали то? Только по горизонтали, тады пишешь <div align=center>, но это не CSS естественно.

Sam Dark · 09.08.2005, 20:01

Случайно не это надо получить?

Код:

S
o
m
e

t
e
x
t

rootus · 09.08.2005, 21:12

Пример:

<div id="header">
<div id="headertext">
Это просто текст
</div>
</div>

Нуна так чтоб Это просто текст был выравнин повертикали, поцентру хэдэра, он всё равно выровнен по верхушке, приклеен к верхней части хэдера, и не хочет центроваться, опера 8.1.

Hatifnatt · 09.08.2005, 23:42

Т.е. ты хочешь чтобы текст занимал 2 строки, но был выровнен по середине этих двух строк

Код:

Текст

(здесь три строчки но будем считать то две и текст посередине

)
Ты приведи, что у тебя скрывается под

Цитата:

id="header"
id="headertext"

какой CSS код, а то по информативности это мало уступает первому посту.
(Или это я такой тупой

)

BorLase · 10.08.2005, 00:56

rootus, ты id="header" с class="header" случайно не перепутал?

Hatifnatt · 10.08.2005, 01:50

Цитата:

BorLase:
rootus, ты id="header" с class="header" случайно не перепутал?

Нет думаю что он не перепутал, к стилю можно обратиться и через id тогда надо писать так

Код:

...
#some_id {color:red; text-decoration:underline; ... }
...

тогда элемент с id "some_id" буде отображаться описаным стилем, так что тут все верно.
Если что смотрим тут http://www.imho.ws/showthread.php?t=35454 (спецификация по CSS, это дабы лишних разговоров не разводить, кстати может и для rootus пригодится, толковый очень мануал, но к сожалению ничего нового не нашел

)

PS К rootus убедительная/настоятельная просьба всетаки разяснить подробно чего он хочет добится, а то мы все тут гадаем кто во что горазд, не дело это желательно чтоб все было подробненько и акуратненько расписано

так сказать "врага надо знать в лицо".

BorLase · 10.08.2005, 11:30

Цитата:

Hatifnatt:
Нет думаю что он не перепутал, к стилю можно обратиться и через id

хм... не знал - спасибо за хинт

rootus · 13.08.2005, 23:28

<div id="header">
<div id="headertext">
Это просто текст
</div>
</div>

#header { height: 10px; width: 100%; background: #000;}
#headertext {color:#fff; vertical-align: middle;} - Не помогает.

Что тут непонятного.
Блок чёрного цвета высотой 10 пикселей, внутри него текст который нуна выровнять вертикально поцентру.

Ale · 14.08.2005, 04:11

Цитата:

Сообщение от rootus

высотой 10 пикселей, внутри него текст

Какого размера текст интересно, если его еще надо выравнивать внутри 10px box ??

Это сработает в Опере и Мочилле, в ИЕ - нет:

Код:

#header {width: 100%; background: #000;}
#headertext {display: table-cell; vertical-align: middle; height: 100px; color:#fff;}

Для совместимости таки лучше заменить на таблицу. Или на крайний случай используй для ИЕ отступ в пиксах или процентах:

Код:

#header {width: 100%; background: #000;}
#headertext {_margin-top: 10%; display: table-cell; vertical-align: middle; height: 100px; color:#fff;}

rootus · 14.08.2005, 14:02

Имеет ли значение высота текстового блока? Можно ли выровнять блок внутри блока, по высоте, и где нужно указывать параметр выравнивания, в блоке который выравнивается или в блоке в котором происходит выравнивание.

Пример:

<div id="header">
<div id="text">
</div>
</div>

#header {height:100px; width:100%; background: #000; display: table-cell; vertical-align: middle;}
#text {height:20px; color: #FFF; }

Ширина header сразу становиться равной ширине text, а не 100%.

Ale · 14.08.2005, 23:22

http://www.student.oulu.fi/~laurirai/www/css/middle/

smap · 20.08.2005, 11:45

Код HTML:

<div style="position: relative; width: 100%; height: 100%;"> 
  <div style="position: absolute; top: 50%; margin-top: -10px; height: 20px;   width: 100%; text-align: center;"> 
    Some text
  </div>
</div>

или

Код HTML:

<html>
  <head>
    <style type="text/css"><!--
      html, body { width: 100%; height: 100%; margin: 0; padding: 0 } 
     .text { position: relative; width: 100%; height: 100%; }
     .text_in { position: absolute; top: 50%; margin-top: -10px; height: 20px; width: 100%; text-align: center; }
    --></style>
  </head>
  <body>
    <div class="text">
      <div class="text_in">
        Some text
      </div>
    </div>
  </body>
</html>

08.08.2005, 19:22	# 1
rootus Member Регистрация: 19.08.2003 Адрес: Поиск... Сообщения: 309	[css] Вертикальное выравнивание Народ мож кто занет как выровнить текст в блоке <div>Some text</div> по вертикали, vertical-align не даёт никакого эффекта. __________________ кто-то запретил вставлять ссылки на темы в подписе, заходите сами [IMHO's LIFE -> Встречи форумчан. -> Сходка.Минск!]

09.08.2005, 20:01	# 3
Sam Dark Member Регистрация: 03.07.2003 Адрес: Voronezh, Russia Пол: Male Сообщения: 294	Случайно не это надо получить? Код: S o m e t e x t __________________ Это жжжж неспроста...

09.08.2005, 21:12	# 4
rootus Member Регистрация: 19.08.2003 Адрес: Поиск... Сообщения: 309	Пример: <div id="header"> <div id="headertext"> Это просто текст </div> </div> Нуна так чтоб Это просто текст был выравнин повертикали, поцентру хэдэра, он всё равно выровнен по верхушке, приклеен к верхней части хэдера, и не хочет центроваться, опера 8.1. __________________ кто-то запретил вставлять ссылки на темы в подписе, заходите сами [IMHO's LIFE -> Встречи форумчан. -> Сходка.Минск!]

10.08.2005, 00:56	# 6
BorLase ::VIP:: Регистрация: 09.09.2002 Адрес: Kiev Пол: Male Сообщения: 1 150	rootus, ты id="header" с class="header" случайно не перепутал? __________________ Great minds discuss ideas. Average minds discuss events. Small minds discuss people.

13.08.2005, 23:28	# 9
rootus Member Регистрация: 19.08.2003 Адрес: Поиск... Сообщения: 309	<div id="header"> <div id="headertext"> Это просто текст </div> </div> #header { height: 10px; width: 100%; background: #000;} #headertext {color:#fff; vertical-align: middle;} - Не помогает. Что тут непонятного. Блок чёрного цвета высотой 10 пикселей, внутри него текст который нуна выровнять вертикально поцентру. __________________ кто-то запретил вставлять ссылки на темы в подписе, заходите сами [IMHO's LIFE -> Встречи форумчан. -> Сходка.Минск!]

14.08.2005, 14:02	# 11
rootus Member Регистрация: 19.08.2003 Адрес: Поиск... Сообщения: 309	Имеет ли значение высота текстового блока? Можно ли выровнять блок внутри блока, по высоте, и где нужно указывать параметр выравнивания, в блоке который выравнивается или в блоке в котором происходит выравнивание. Пример: <div id="header"> <div id="text"> </div> </div> #header {height:100px; width:100%; background: #000; display: table-cell; vertical-align: middle;} #text {height:20px; color: #FFF; } Ширина header сразу становиться равной ширине text, а не 100%. __________________ кто-то запретил вставлять ссылки на темы в подписе, заходите сами [IMHO's LIFE -> Встречи форумчан. -> Сходка.Минск!]

14.08.2005, 23:22	# 12
Ale Junior Member Регистрация: 22.03.2004 Сообщения: 123	http://www.student.oulu.fi/~laurirai/www/css/middle/