Text - vertical align

HTML & CSS
1

[FONT=Tahoma]Hey guys, just wondering if someone can help with aligning text inside a div. I’m only practising with CSS and learning the different effects and positioning of elements. I have had a look through Google and used the forum search but the things suggested haven’t worked. My code is;

<html>
<head>
	<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
	<div class ="roundedcorners"><p>This is a box with rounded corners</p></div>


</body>

</html>

.roundedcorners {
	height: 200px;
	width: 200px;
	border-radius: 40px;
	border: 1px solid;
	overflow: hidden;
}

.roundedcorners p {
	font-size: 14pt;
	padding: 5px;
	text-align: center;
	display:inline-block;
	vertical-align:middle;
}

It seems like the “display:inline-block;” & “vertical-align:middle;” don’t have any impact on the div p. I’m trying this in chrome if that helps.

Cheers guys:)[/FONT]

2

Try these links:

http://deeson-online.co.uk/labs/how-centre-align-text-or-content-vertically-css

http://stackoverflow.com/questions/8543859/css-vertical-alignment-text-inside-li

3

It would work if you used display: table;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<head>
<style>
.roundedcorners {
	height: 200px;
	width: 200px;
	border-radius: 40px;
	border: 1px solid;
	overflow: hidden;
	[COLOR="#FF0000"]display: table;[/COLOR]
}

.roundedcorners p {
	font-size: 14pt;
	padding: 5px;
	text-align: center;
	[COLOR="#FF0000"]display:table-cell;[/COLOR]
	vertical-align: middle;
}
	
</style>
</head>
<body>
	<div class ="roundedcorners"><p>This is a box with rounded corners</p></div>
</body>
</html>
4

This my own method, It’s pretty IE safe( with some minor tweaking you can get it to work back to IE6!


.roundedcorners {
	height: 200px;
	width: 200px;
	border-radius: 40px;
	border: 1px solid;
  }
.roundedcorners:after{  content:""; height:100%; }
.roundedcorners p {
	font-size: 14pt;
	padding: 5px;
	text-align: center;
 }
	.roundedcorners:after, .roundedcorners p{display:inline-block;vertical-align: middle;}
5

…and just for fun and without using display:table.
(IE8+)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<head>
<style>
.roundedcorners {
	height: 200px;
	width: 200px;
	border-radius: 40px;
	border: 1px solid;
	overflow: hidden;
	[B]line-height:200px;[/B]
}
.roundedcorners p {
	font-size: 14pt;
	padding: 5px;
	text-align: center;
	[B]line-height:normal;
	display:inline-block;
	vertical-align: middl[/B]e;
}
	
</style>
</head>
<body>
	<div class ="roundedcorners"><p>This is a box with rounded corners</p></div>
</body>
</html>

No benefit over using display:table/cell but just another tool in the box.:slight_smile:

For ie7 and 6 you have to use the similar method that Ray has shown above but with more IE specific code.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.roundedcorners {
	height: 200px;
	width: 200px;
	display:table;
	border-radius: 40px;
	border: 1px solid;
}
.roundedcorners p {
	margin:0;
	font-size:140%;
	padding: 5px;
	text-align: center;
	display:table-cell;
	vertical-align:middle;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.roundedcorners {
	zoom:expression(
	runtimeStyle.zoom=1,
	insertAdjacentHTML('beforeEnd','<span class="after"></span>'));
	overflow;hidden;
}
.roundedcorners p{
	zoom:1.0;
	display:inline;
	vertical-align:middle;
	width:199px;
	margin-right:-.5em;/* kill whitespace node*/
}
.after{
	height:100%;
	display:inline-block;
	vertical-align:middle;
	width:1px;
	overflow:hidden;
	background:red
}
</style>
<![endif]-->
</head>

<body>
<div class="roundedcorners">
		<p>This is a box with rounded corners</p>
</div>
</body>
</html>

However thgese days I think you can forget about the extra code for ie6 and 7 and just let them align to the top. The content wil still be accessible but just not aligned. No great loss for old browsers.