Выравнивание кнопок по вертикали (chrome/webkit,firefox)

cdrom · January 14, 2011

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

Как выровнять кнопки по одной линии с разным содержимым?

Такое поведение наблюдается в firefox, crome и всех браузерах на основе webkit.

Смещение по вертикали 21px.

Ниже код и скрины с хрома.

<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
button {
   font: 700 60px "arial", "arial narrow";
   width: 33%;
   font-variant:small-caps;
   height: 125px;
   overflow: hidden;
   margin: 5px 10px;
}

span.cfnDesc{
	display:block;
	font-size: 0.3em;
}
	</style>

</head>
<body>
<div class="cfnSubstrate">
	<button id="cfnBtnNo">Нет</button>
	<button id="cfnBtnOk">Да<span class="cfnDesc">Описание</span></button>
</div>
</body>
</html>

Great Rash · January 14, 2011

button {vertical-align: bottom;}

cdrom · January 14, 2011

button {vertical-align: bottom;}

Спасибо! Ты спас меня!

Sign In

Выравнивание кнопок по вертикали (chrome/webkit,firefox)

Question

cdrom

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

cdrom

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information