bfsog
January 14 '08, 08:03 AM
In this tutorial you will learn how to center text and/or elements horizontally and vertically.
This tutorial uses CSS style rules, if you still use tags like <font> then I suggest you click here (http://w3schools.com/css/css_font.asp)
How to center text
This first example will show you how to center text. We use the CSS property called text-align and we set text-align to center. Possible values are center, left, right and justify.
The CSS:
p.center_text
{
text-align: center;
}
The HTML:
<p class="center_text">
This text will be centered. We use the css property text-align and the value 'center' to achieve this.
</p>
Note: if you nest that <p> inside a parent which has a width, then that <p>'s text will be centered according to the width value.
How to center an element
So we can center text, but what if you want to center the element the text is in but not the actual text?
A common mistake (for me anyway) is to have the following CSS
p.center_element
{
margin-left: auto;
margin-right: auto;
}
And HTML like
<p class="center_element">
This element will not be centered, although we are using margin-left and margin-right we need to give a width to the
css rule otherwise the element will take up 100% width, thus not centering.
</p>
How to properly center an element
This is the correct CSS
p.center_element_proper
{
margin-left: auto;
margin-right: auto;
width: 400px;
}
The HTML
<p class="center_element_proper">
This element will be centered, as the style rule is setting its left and right margin to be auto, or equal.<br />
Note: the text will not be centered, only the element the text resides in.
</p>
How to center an element and it's text
To center an element's and the text inside that element is just a combination of the above - use margin-left, margin-right and text-align.
CSS
p.center_element_and_text
{
margin-left: auto;
margin-right: auto;
text-align: center;
width: 400px;
}
HTML
<p class="center_element_and_text">
This element and it's contents will be centered using margin-left, margin-right and text-align.
</p>
How to center vertically
One way to set text to be verticaly aligned is to change it's display value to table-cell as they can be vertically aligned.
The CSS
div.center_vertical_text
{
border: 1px solid blue;
height: 10em;
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
The HTML
<div class="center_vertical_text"><p>
You can center vertically using CSS by setting the display property of an element to 'table-cell' as table cells
can be centered vertically. You also need to set the height and the min-height.
I set a border to show the gap above and below this text.
</p></div>
Hopefully this will help you understand how to align text and page elements. I have attached a file showing these examples.
This tutorial uses CSS style rules, if you still use tags like <font> then I suggest you click here (http://w3schools.com/css/css_font.asp)
How to center text
This first example will show you how to center text. We use the CSS property called text-align and we set text-align to center. Possible values are center, left, right and justify.
The CSS:
p.center_text
{
text-align: center;
}
The HTML:
<p class="center_text">
This text will be centered. We use the css property text-align and the value 'center' to achieve this.
</p>
Note: if you nest that <p> inside a parent which has a width, then that <p>'s text will be centered according to the width value.
How to center an element
So we can center text, but what if you want to center the element the text is in but not the actual text?
A common mistake (for me anyway) is to have the following CSS
p.center_element
{
margin-left: auto;
margin-right: auto;
}
And HTML like
<p class="center_element">
This element will not be centered, although we are using margin-left and margin-right we need to give a width to the
css rule otherwise the element will take up 100% width, thus not centering.
</p>
How to properly center an element
This is the correct CSS
p.center_element_proper
{
margin-left: auto;
margin-right: auto;
width: 400px;
}
The HTML
<p class="center_element_proper">
This element will be centered, as the style rule is setting its left and right margin to be auto, or equal.<br />
Note: the text will not be centered, only the element the text resides in.
</p>
How to center an element and it's text
To center an element's and the text inside that element is just a combination of the above - use margin-left, margin-right and text-align.
CSS
p.center_element_and_text
{
margin-left: auto;
margin-right: auto;
text-align: center;
width: 400px;
}
HTML
<p class="center_element_and_text">
This element and it's contents will be centered using margin-left, margin-right and text-align.
</p>
How to center vertically
One way to set text to be verticaly aligned is to change it's display value to table-cell as they can be vertically aligned.
The CSS
div.center_vertical_text
{
border: 1px solid blue;
height: 10em;
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
The HTML
<div class="center_vertical_text"><p>
You can center vertically using CSS by setting the display property of an element to 'table-cell' as table cells
can be centered vertically. You also need to set the height and the min-height.
I set a border to show the gap above and below this text.
</p></div>
Hopefully this will help you understand how to align text and page elements. I have attached a file showing these examples.