Making your content go where you want it can be one of the most challenging things about web design, and there is no simple way of doing it. Ideally you would have "postion:center;" and the text or image or block would fit nicely in the middle of the page or the section, but we don't have this... yet.
So how do you centre stuff?? Here are 2 quick examples to show you and for you to bookmark and learn for later use..
1. Centre a div block inside a container, with centrally aligned text.
This is what we will be creating but how do we do it?
1. Open the text editor of your choice - notepad, Dreamweaver etc
2. I will be using HTML5 attributes in this example, so copy and paste this code into your text editor
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<section>
<article>
<p>this is in the middle?</p>
</article>
</section>
</body>
</html>
We use the new HTML5 doctype, link our stylesheet, which we will create later, add the Google hosted HTML5 shiv, so that our classes work in all old browsers and then we start our document.
Inside the body tag we have a "section" tag which will be the main container for our document, inside his we have an "article" tag which will become the red block and then inside the article we have a simple "p" tag with some text.
Save this and lets move on to the css.
3. Now open a new document in your text editor and name it "styles.css" and copy this code in to it and save
section {
border:1px solid #111;
height:400px;
margin:20px auto;
width:800px;
}
article {
background:red;
height:200px;
margin-left:200px;
margin-top:100px;
width:400px;
}
article > p {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
display:block;
line-height:200px;
text-align:center;
}
First we create the section styles, we set a height of 400px and a width of 800px (these will be important for later), add a border around it so we can see it, and then centre this div using margin:20px auto - this drops it 20px from the top as well. Centering divs this way is easy as the margin styles work no problem, it's centering elements inside each other where problems occur.
The article is the div block we want to centre so we add these styles - height of 200px and width of 400px and add a background colour of red so we can see it. Now to get it in the middle we need to set the top and left margins to HALF the size of the div.... so as its 200px high we set the top margin to 100px and as its 400px wide we set the left margin to 200px ..... this then pushes the box in to the middle!
If the box was 300px x 100px then we would use margins of 150px and 50px etc etc
You can also do it another way by using - display:block; and setting the margin to 100px auto; but some older browsers don't like this, but again the top margin needs to always be half the div size.
4. Now to get the text in the centre we use the css style of article > p - this means all p tags that are a direct descendants of the article class, and so not all the p tags in the document if you had more.
We have to use display:block again and we use text-align:center to center the text, but how do we get it to drop down in to the direct center of the div?? By using line-height:200px the text will drop into the center - this 200px style has been set as the containing div is 200px high, if it was 300px high the line height would have to be 300px also.....
Ok cool that's text sorted, what about images??
Again we have the same HTML structure as before, but this time i have added an image in replace of the p tags. The image is 100px x 100px.
To center images you need to do somethings differently...
article > img {
display:inline;
margin-top:50px;
margin-left:150px;
}
We will use the direct descendant css code to only link to the images that are inside the article div.
We set it to display:inline this time not block, and as the image is 100px height and the div is 200px high we set the top margin of 50px so it drops down into the middle.
The top margin always need to be - "size of container minus size of image divided by 2 " so 200px - 100px = 100px / 2 = 50px
Also a quick note using - margin:50px 0px 0px 150px; will also work - but NOT 50px auto;
So there you have it, quick tips on how to center stuff, one thing which can cause massive headaches and waste lots of time!!
:)
No comments:
Post a Comment