Как выровнить текст по вертикали

[termoplus]

Нужно выровнить текст по вертикали в кнопке. Простыми словами дело обстоит так, блок кнопки например 50х200px, в левой части иконка, после заголовок. текст выравнивается по верхнему краю. Прописываю vertical-align:bottom для кнопки, но не действует. Можно использовать padding,но мне нужно при уменьшении разрешения монитора второе слова заголовка(кнопка) переходит на новую строчку и padding вот здесь все испортит.

<ul>
          <li><a href="#" class="mNav01">Системы безопастности</a></li>
          <li><a href="#" class="mNav02">Контроль доступа</a></li>
          <li><a href="#" class="mNav03">Системы видеонаблюдения</a></li>
          <li><a href="#" class="mNav04">Охрана периметра</a></li>
          <li><a href="#" class="mNav05">Системы оповещения</a></li>
        </ul>

Код CSS

#services ul li a {

font: bold 0.9em "Trebuchet MS", Arial, Helvetica, sans-serif;

text-transform: uppercase;

color: #69768d;

text-decoration: none;

display: block;

}

#services ul li .mNav01 {

background: url(images/nav01_small.jpg) no-repeat left top;

display: block;

width:100%

height: 50px;

padding: 0 55px;

margin-bottom: 10px;

border-bottom: 1px dotted #ccc;

//этот же класс для всех кнопок//

СПАСИБО

[Justnewone]

Нужно выровнить текст по вертикали в кнопке. Простыми словами дело обстоит так, блок кнопки например 50х200px, в левой части иконка, после заголовок. текст выравнивается по верхнему краю. Прописываю vertical-align:bottom для кнопки, но не действует. Можно использовать padding,но мне нужно при уменьшении разрешения монитора второе слова заголовка(кнопка) переходит на новую строчку и padding вот здесь все испортит.

<ul>
          <li><a href="#" class="mNav01">Системы безопастности</a></li>
          <li><a href="#" class="mNav02">Контроль доступа</a></li>
          <li><a href="#" class="mNav03">Системы видеонаблюдения</a></li>
          <li><a href="#" class="mNav04">Охрана периметра</a></li>
          <li><a href="#" class="mNav05">Системы оповещения</a></li>
        </ul>

Код CSS

#services ul li a {

font: bold 0.9em "Trebuchet MS", Arial, Helvetica, sans-serif;

text-transform: uppercase;

color: #69768d;

text-decoration: none;

display: block;

}

#services ul li .mNav01 {

background: url(images/nav01_small.jpg) no-repeat left top;

display: block;

width:100%

height: 50px;

padding: 0 55px;

margin-bottom: 10px;

border-bottom: 1px dotted #ccc;

//этот же класс для всех кнопок//

СПАСИБО

Смотрите в сторону display:table; и т.д.

Не по теме,

width:100%

padding: 0 55px;

решение спорное. напишите тут width:auto если Вам надо переназначить другой приходящий стиль или вовсе без указания width.

[termoplus]

если честно width у меня не было установленно, просто решил здесь показать чтобы было понятно что к чему. не знал, что это так принципиально действует, сорри. а вот display:table, а после vertical-align:middle опять не ни к чему не привело. упирается текст в верхний край гад.............

а padding: 0 55px пусть вас не смущает что слева и справа. Справа специально установил чтобы при разрешении 1024 пик. второе слово не умещялось и перетекло вниз.....

блин, а срочно то нужно......

спасибо за все! удачи!

Edited April 6, 2009 by termoplus

[Searcher]

совершенно не понял где здесь кнопка...

может указать выравнивание не для текста, а для иконки: допустим background: url(images/nav01_small.jpg) no-repeat left center;

а если с текстом то есть универсальный вариант. Но он довольно объемный.

А потом, vertical-align нужно для родителя указывать и он позиционирует только inline-элементы...

а display:table; ИЕ не понимает...

[termoplus]

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

Edited April 6, 2009 by termoplus

[SelenIT]

Уточнение: не table, а table-cell. А для IE (ниже актуального 8-го)... да, или вышеупомянутый способ с доп. контейнером и top: -50%, либо экспрешн (подробнее).

vertical-align ... позиционирует только inline-элементы...

В таблицах и "как бы таблицах" - не только. Edited April 6, 2009 by SelenIT

[Searcher]

В таблицах и "как бы таблицах" - не только.

Что-то нашел там только про текст в ячейках... На сколько я помню, <div> в ячейке таблицы не отпозиционировать при помощи vertical-align/

[Justnewone]

Что-то нашел там только про текст в ячейках... На сколько я помню, <div> в ячейке таблицы не отпозиционировать при помощи vertical-align/

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

[Searcher]

честно говоря как-то давно не сталкивался...

возможно, если указать line-height и vertical-align может и получится

[termoplus]

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

[nvgudz]

Можно очень аккуратно поиграться с экспрешном для ИЕ и ему подобных (хотя, я не являюсь сторонником данного метода). Для остальных браузеров через display:table; & display:table-cell. Решение включает добавления еще одного элемента в хтмл.

ЦСС:

/* only for good display, you may remove this */
html,body{ margin:0; padding:0; }
ul,ul li{ list-style-type:none; margin:0; padding:0; }
#services{ width:20%; }
/* only for good display, you may remove this */

#services ul li a {
font: bold 0.9em "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #69768d;
text-decoration: none;
height: 50px;
padding: 0 55px;
margin-bottom: 10px;
border-bottom: 1px dotted #ccc;
/* new style */
display:table;
width:100%; 
/* new style */
}

#services ul li a span{ display: table-cell; vertical-align:bottom; }

/* for IE > 5  */
*html #services ul li,*html #services ul li a{ display:block;}
*+html #services ul li,*+html #services ul li a{ display:block; }
*html #services ul li a span{ display:block;margin-top: expression((parentNode.offsetHeight)-(parseInt(offsetHeight)) <0 ? "0" :(parentNode.offsetHeight)-(parseInt(offsetHeight)) +'px'); }
*+html #services ul li a span{ display:block;margin-top: expression((parentNode.offsetHeight)-(parseInt(offsetHeight)) <0 ? "0" :(parentNode.offsetHeight)-(parseInt(offsetHeight)) +'px'); }
/* for IE > 5 */

/* you have got your own pictures */
#services ul li .mNav01 {background: url(http://www.dimonn.com/Olsi/images/c3.gif) no-repeat;}	
#services ul li .mNav02 {background: url(http://www.dimonn.com/Olsi/images/c1.gif) no-repeat;}	
#services ul li .mNav03 {background: url(http://www.dimonn.com/Olsi/images/c2.gif) no-repeat;}	
#services ul li .mNav04 {background: url(http://www.dimonn.com/Olsi/images/c3.gif) no-repeat;}	
#services ul li .mNav05 {background: url(http://www.dimonn.com/Olsi/images/c1.gif) no-repeat;}	
#services ul li .mNav01:hover {background: url(http://www.dimonn.com/Olsi/images/c2.gif) no-repeat;}	
#services ul li .mNav02:hover {background: url(http://www.dimonn.com/Olsi/images/c3.gif) no-repeat;}	
#services ul li .mNav03:hover {background: url(http://www.dimonn.com/Olsi/images/c1.gif) no-repeat;}	
#services ul li .mNav04:hover {background: url(http://www.dimonn.com/Olsi/images/c2.gif) no-repeat;}	
#services ul li .mNav05:hover {background: url(http://www.dimonn.com/Olsi/images/c3.gif) no-repeat;}	
/* you have got your own pictures */

ХТМЛ:

<div id="services">
	<ul>
		<li><a href="#" class="mNav01"><span>Системы безопастности</span></a></li>
		<li><a href="#" class="mNav02"><span>Контроль доступа</span></a></li>
		<li><a href="#" class="mNav03"><span>Системы видеонаблюдения</span></a></li>
		<li><a href="#" class="mNav04"><span>Охрана периметра</span></a></li>
		<li><a href="#" class="mNav05"><span>Системы оповещения</span></a></li>
	</ul>
</div>