Inline & Block elements >> Centering HTML elements
In this article I have describe which HTML elements are inline elements and which are block level HTML5 elements. How to center inline elements inside a container DIV or block level elements.
Centering text & inline elements
IMG, STRONG, SPAN elements in a webpage are examples of inline elements. Alos I have used the term inline content, which means inline elements. Inline content includes such things as text, images, <strong> and <span> tags. Now we need to center inline content inside a block element (Normally Inline elements resides inside a BLOCK element like DIV, H1 etc)
Just use text-align property applied to the next higher level block level container with the content to be aligned inside. View the example as given below.
Centering of text inline elements shown here
The block elements like P, H1, DIV (or these HTML tags <p> , <h1> and <DIV>) inside the <DIV class=”container”> takes the full width of <DIV class=”container”> and you can see it by Background colour, but the inline SPAN tag only takes the width of the text inside it.
Also the text-align:center property of container DIV (here <DIV class=”container”>) automatically inherited to the BLOCK LEVEL child elements H1, P and DIV inside <DIV class=”container”>.
<style>
.container {
text-align:center;
width:75%;
margin: 50px 0;
border: 1px solid blue;
}
</style>
<div class=”container”>
<p>The paragraph inside container DIV.</p>
<h1>The H1 tag inside DIV</h1>
<div style=”background:#09C”>This is a DIV inside the bordered DIV</div>
<span style=”background:#C9C”>A SPAN tag</span>
</div>
The paragraph inside container DIV.
The H1 tag inside DIV
A SPAN tag
Notice the default behavior of child block level elements inside a BLOCK level container.
<h1 style=”text-align:center”> This is a title h1 tag of this page </h1>
View all the following LIVE Codes here in this webpage
Left Align
The paragraph inside container DIV.
The H1 tag inside DIV
A SPAN tag
the text-align:left is the default behaviour. So you can easily omit this text-align property in your container’s style.
The Code Here :
<style>
.container1 {
width:75%;
border: 1px solid blue;
}
.center-align {
text-align:center;
}
.right-align {
text-align: right;
}
</style>
<div class=”container1″>
<p style=”background: #99F”>The paragraph inside container DIV.</p>
<h1 style=”background:#FF0″>The H1 tag inside DIV</h1>
<div style=”background:#09C”>This is a DIV inside the bordered DIV</div>
<span style=”background:#C9C”>A SPAN tag</span>
</div>
Center Align
<div class=”container1 center-align”>
<p style=”background: #99F”>The paragraph inside container DIV.</p>
<h1 style=”background:#FF0″>The H1 tag inside DIV</h1>
<div style=”background:#09C”>This is a DIV inside the bordered DIV</div>
<span style=”background:#C9C”>A SPAN tag</span>
</div>
The paragraph inside container DIV.
The H1 tag inside DIV
A SPAN tag
the text-align:center property of container DIV (here <DIV class=”container center-align”>) automatically inherited to the BLOCK LEVEL child elements H1, P and DIV inside <DIV class=”container center-align”>.
Right Align
the text-align:right property of container DIV (here <DIV class=”container right-align”>) automatically inherited to the BLOCK LEVEL child elements H1, P and DIV inside <DIV class=”container right-align”>.
The paragraph inside container DIV.
The H1 tag inside DIV
A SPAN tag
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style>
#container {
padding: 20px;
text-align:center;
}
#child1{
text-align:center;
width:50%;
}
#child1 span {
max-width: 100px;
}
#child2{
width:50%;
text-align:left;
}
</style>
</head>
<body>
<div id=”container”>
<div id=”child1″>
<p>h how are you.</p>
<h1>Thank you very much my boy</h1>
<span>Content for id “container” Goes Here</span>
</div>
<div id=”child2″>hello</div>
</div>
</body>
</html>
Point of clarification: While the text-align property is applied to the, the content it positions is the text inside the element, not the element itself. You can visit this link to know more details: http://dorward.me.uk/www/centre/#block
Vertical Centering in CSS : http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
More tutorial here : http://www.student.oulu.fi/~laurirai/www/css/middle/