LINUX.ORG.RU
Форум — Development  

подскажите как выровнять текст в диве


0

1

пишу див для отображения кнопки.
имеет фиксированные размеры.

текст (имя ссылки) может быть как в одну так и в две строки.

как сделать так, что бы массив текста (1 или 2 строки) позиционировался ровно по центру (по высоте)?

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

я конечно могу написать костыль - 2 разных стиля. но это совсем быдлокод же.

☆
← Flex и Bison: C vs C++
[NHibernate] Явное указание типа столбца →

text-align:center;
line-height: 40px; (высота элемента внутри которого выравнивать)
vertical-align:middle;

приводит к тому что однострочные записи идеально по центру.
так же как и 1-я строка двустрочных записей. а вторая строка - улетает вниз.

очень не хочется писать еще один стиль. хочется разобраться.

____

и еще вопрос вдогонку...
можно ли как-то делать принудительный перенос текста на новую строку внутри тега <a> (ссылка)?

dk- ☆
() автор топика
Ответ на: комментарий от xpahos

a.button_1 {
display:block;
width:184px;
height:40px;
background:url(/img/button-1.png);
font-size:0.85em;
text-align:center;
line-height: 40px;
vertical-align:middle;
}

при таком коде одна строка текста выравнивается строго по центру

dk- ☆
() автор топика

Забить и сделать таблицу.

Deleted
()
Ответ на: комментарий от Beaten_Sect0r

Хмм...

печально(

у меня

a.button_1:link, a.button_2:link { text-decoration:none; color:#FFF;}

a.button_1:visited, a.button_2:visited { text-decoration:none; color:#FFF;}

a.button_1:hover, a.button_2:hover { text-decoration:none; color:#FFF; background:url(/img/button-2.png);}

a.button_1:active, a.button_2:active { text-decoration:none; color:#FFF; background:url(/img/button-3.png);}

висит ради анимации кнопок.
не стал рисковать это делать на css3 (без картинок), хотя прочел как.
ибо у ЦА вполне могут быть старые браузеры.

dk- ☆
() автор топика
Ответ на: комментарий от drakmail

спасибо:)

была мысль, но не стал проверять. переклинило, что нельзя вкладывать так тэги.

все гениальное просто.

dk- ☆
() автор топика
Ответ на: комментарий от Beaten_Sect0r

а как правильно это делать в таблице?
ну расово-верно

dk- ☆
() автор топика

хз как, но работает:

помогло следующее в свойствах дива:

line-height: 19px;
vertical-align: 10px;

подобрал тупо на глаз.
проверил в 4х браузерах. работает :)

костыли иногда рулят.

dk- ☆
() автор топика
Ответ на: комментарий от dk-

это специфично

я бы сказал что это правильнее чем зум.. но очень мало сайтов в сети сделаны так, что не «плывут» при не дефотлном minimum font size.. так что сойдет

ZuBB ★★★★★
()

inline-block тоже vertical-align понимает.
Тем более если фиксированные размеры, почему нельзя использовать padding'и?

moscwich ★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Flex и Bison: C vs C++
Development
[NHibernate] Явное указание типа столбца →