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 is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Centering lines of Text, Block or Image

Last accessed pages

  1. PHP MySQL - SELECT, ORDER BY (8982)
  2. Frog Dares (157)
  3. Action Games (4889)
  4. Voting Poll System script PHP-AJAX (5308)
  5. Amazing Escape (241)

Popular pages this month

  1. Bubbles3 (3136)
  2. Butterfly Kyodai (2748)
  3. Zuma Deluxe (2025)
  4. Qwop (1252)
  5. Backgammon (1197)