Выравние разного текста по верху блока

okunev2 · February 26, 2010

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

#telephone {
	position: absolute;
	right: 0;
	top: 140px;
	display: block;
}

#telephone p {
	color: #7540f8;
	font-family: Georgia;
	font-size: 18px;
	font-style: italic;
	font-weight: lighter;
	text-align: right;
}

#telephone p em {
	color: #ff0066;
	font-family: Georgia;
	font-size: 36px;
}


<div id="telephone"><p>+7 (xxxx) <em>xxx-xxx-xxx</em></p></div>

Спасибо

rus · February 26, 2010

А что, паддинги с маржинами уже отменили?

okunev2 · February 26, 2010

А что, паддинги с маржинами уже отменили?

Т.е.?

rus · February 26, 2010

Т.е.?

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

Great Rash · February 27, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}

		#telephone {
			position: absolute;
			right: 0;
			top: 140px;
			border: 1px solid;
		}

		#telephone em.y {
			color: #ff0066;
			font: 36px/36px Georgia;
			vertical-align: top;
		}

		#telephone em.x {
			color: #7540f8;
			font: italic 18px/36px Georgia;
			font-weight: lighter;
			vertical-align: top;
		}
	</style>
</head>

<body>

	<p id="telephone"><em class="x">+7 (xxxx) </em><em class="y">xxx-xxx-xxx</em></p>

</body>
</html>

okunev2 · February 28, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}

		#telephone {
			position: absolute;
			right: 0;
			top: 140px;
			border: 1px solid;
		}

		#telephone em.y {
			color: #ff0066;
			font: 36px/36px Georgia;
			vertical-align: top;
		}

		#telephone em.x {
			color: #7540f8;
			font: italic 18px/36px Georgia;
			font-weight: lighter;
			vertical-align: top;
		}
	</style>
</head>

<body>

	<p id="telephone"><em class="x">+7 (xxxx) </em><em class="y">xxx-xxx-xxx</em></p>

</body>
</html>

Спасибо, вот только есть вопрос, а что значит такая конструкция 36px/36px, первый раз вижу:

font: 36px/36px Georgia;

font: 36px/36px Georgia;

Если использовать такое решение, то в ИЕ6-7 в строке текст все равно пляшет

mini · February 28, 2010

Спасибо, вот только есть вопрос, а что значит такая конструкция 36px/36px, первый раз вижу:
font: 36px/36px Georgia;
font: 36px/36px Georgia;
Если использовать такое решение, то в ИЕ6-7 в строке текст все равно пляшет

первое font-size:36px; второе line-height:36px;, разрули с помощью line-height:; и padding:; или margin:;

okunev2 · February 28, 2010

первое font-size:36px; второе line-height:36px;, разрули с помощью line-height:; и padding:; или margin:;

чот рулю рулю кросбраузерно не получается

shvv · February 28, 2010

чот рулю рулю кросбраузерно не получается

Вертикальное выравнивание также можно задавать в пикселях.

Попробуйте задать 4-5px.

okunev2 · March 1, 2010

Вертикальное выравнивание также можно задавать в пикселях.
Попробуйте задать 4-5px.

т.е. так:

vertical-align: 5px;

shvv · March 1, 2010

т.е. так:
vertical-align: 5px;

Ну да.

Sign In

Выравние разного текста по верху блока

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information