Centering Vertically

Centering elements in a web page is probably one of the most common tasks for CSS.
There are three kinds of centering:
- Centering lines of text.
- Centering a block of text or an image.
- Centering a block or an image vertically.

Centering lines of text

To center lines of text horizontally in a paragraph, in a heading, a DIV or other HTML element, CSS has the text-align property, to which apply the value: center.
- Example:
<style type="text/css"><!--
h3 {
 border: 1px solid blue;
 text-align: center;
}
#idiv {
 border: 1px dashed green;
 text-align: center;
}
--></style>

<h3>Free Wweb Programming Courses - coursesweb.net</h3>
<div id="idiv">Div with text centered.</div>

Result:

Free Wweb Programming Courses - coursesweb.net

Div witht ext centered.

Centering a block or an image

To center a block as a whole (the left and right margin to be equal), you must set the left and right margins to auto, and specify a width for that block.
- Example:
<style type="text/css"><!--
#idiv {
 margin-left: auto;
 margin-right: auto;
 width: 8em;
 border: 1px dashed blue;
 padding: 3px;
}
--></style>

<div id="idiv">Div centered. The lines inside the block are not centered (they are left-aligned).</div>

Result:
Div centered. The lines inside the block are not centered (they are left-aligned).

• In the same way you can center an image: make it into block of its own (with display:block; property) and apply the margin properties to it. For example:
<style type="text/css"><!--
#idimg {
 display: block;
 margin-left: auto;
 margin-right: auto;
 border: none;
}
--></style>

<div>
 Some text or other content...
 <img src="image.jpg" alt="Text for image" width="200" height="200" id="idimg" />
</div>

Result:
Some text or other content... CSS3 Image

Centering Vertically

To center blocks vertically, you must add them inside another block that has a certain "height", and set vertical-align: middle; , then the trick is to specify that this parent block is to be formatted as a table cell (with display: table-cell;), because the contents of a table cell can be centered vertically.
- The example below centers a paragraph inside a <div>.
<style type="text/css"><!--
div.container {
 height: 10em;
 border: 2px dotted blue;
 display: table-cell;         /* forms as a table cell */
 vertical-align: middle;
 padding: 3px 4px;
}
--></style>

<div class="container">
 <p>
  This paragraph is vertically centered.<br/>
  CSS Course: http://coursesweb.net/css/
 </p>
</div>

Result:

This paragraph is vertically centered.
CSS Course: http://coursesweb.net/css/


• In the same way you can center text and image vertically. The following example centers an image and a line of text vertically and horizontally, inside a DIV.
<style type="text/css"><!--
div.container {
 height: 12em;
 border: 2px dotted blue;
 display: table-cell;           /* forms as a table cell */
 vertical-align: middle;        /* center vertically */
 text-align: center;            /* center horizontally */
 padding: 3px 4px;
}
--></style>

<div class="container">
 <img src="image.jpg" alt="Text for image" width="120" height="60" /><br/>
 This line of text and the image above are vertically and horizontally centered.
</div>

Result:
CSS3 Image
This line of text and the image above are vertically and horizontally centered.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
Centering lines of Text, Block or Image

Last accessed pages

  1. Bubbles3 (8869)
  2. Number Lines (1667)
  3. Zuma Games (8603)
  4. Logic Perspicacity Games (2788)
  5. Match Around The World (171)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (47785)
  2. Read Excel file data in PHP - PhpExcelReader (35922)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (35547)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (32047)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (29322)