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>
h3 {
 border: 1px solid blue;
 text-align: center;
}
#idiv {
 border: 1px dashed green;
 text-align: center;
}
</style>

<h4>Example center text</h4>

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

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>
#idiv {
 margin-left: auto;
 margin-right: auto;
 width: 200px;
 border: 2px dashed blue;
 padding: 5px;
}
</style>

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

• 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>
#idimg {
 display: block;
 margin-left: auto;
 margin-right: auto;
 border: none;
}
</style>

<h4>Example center image</h4>

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

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 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>
div.container {
 height: 200px;
 border: 3px dotted blue;
 display: table-cell; /* forms as a table cell */
 vertical-align: middle;
 padding: 3px 4px;
}
</style>

<h4>Example center paragraph vertically</h4>

<div class='container'>
 <p>
 This paragraph is vertically centered.<br>
 CSS Course: https://coursesweb.net/css
 </p>
</div>
• 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>
div.container {
 height: 250px;
 border: 3px dotted blue;
 display: table-cell; /* forms as a table cell */
 vertical-align: middle; /* center vertically */
 text-align: center; /* center horizontally */
 padding: 3px 4px;
}
</style>

<h4>Example center image vertically</h4>

<div class='container'>
 <img src='css/css3.jpg' alt='Text for image' width='170' height='100' /><br>
 This line of text and the image above are vertically and horizontally centered.
</div>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
Centering lines of Text, Block or Image

Last accessed pages

  1. Contact page - CoursesWeb (27250)
  2. Tabs effect with CSS (27925)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (34520)
  4. Ajax-PHP Chat Script (41462)
  5. Common PHP Errors and Solutions (7372)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1322)
  2. Contact page - CoursesWeb (1293)
  3. Tabs effect with CSS (1290)
  4. PHP getElementById and getElementsByTagName (589)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (488)