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 a block element?
<div> <img> <span>
<div>Web Programming and Development</div>
Which CSS code displays the text underlined?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Click on the JavaScript function that can access other function after a specified time.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Click on the instruction that returns the number of items of a multidimensional array in PHP.
count($array) count($array, 1) strlen()
$food = array("fruits" => array("banana", "apple"), "veggie" => array("collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
Centering lines of Text, Block or Image

Last accessed pages

  1. The Rise Of Atlantis (344)
  2. Mystic India Pop (907)
  3. Puzzle Games (2378)
  4. Svetlograd Zuma (1401)
  5. Zuma Deluxe (2845)

Top accessed pages

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