SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Text - vertical align

    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 Code:
    <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>
    Code:
    .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

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,840
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It would work if you used display: table;

    Code:
    <!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;
    	display: table;
    }
    
    .roundedcorners p {
    	font-size: 14pt;
    	padding: 5px;
    	text-align: center;
    	display:table-cell;
    	vertical-align: middle;
    }
    	
    </style>
    </head>
    <body>
    	<div class ="roundedcorners"><p>This is a box with rounded corners</p></div>
    </body>
    </html>

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    This my own method, It's pretty IE safe( with some minor tweaking you can get it to work back to IE6!

    Code:
    .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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Ralph
    It would work if you used display: table;
    ...and just for fun and without using display:table.
    (IE8+)
    Code:
    <!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;
    	line-height:200px;
    }
    .roundedcorners p {
    	font-size: 14pt;
    	padding: 5px;
    	text-align: center;
    	line-height:normal;
    	display:inline-block;
    	vertical-align: middle;
    }
    	
    </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.

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •