[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]
ralphm
March 31, 2013, 3:36am
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>
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;}
PaulOB
March 31, 2013, 9:56am
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.
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.