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. Node.js Move and Copy file (18986)
  2. GraidleChart Create Graphic Charts (1464)
  3. Multiple Select Dropdown List with JavaScript (10171)
  4. Dynamic variables in JavaScript (13671)
  5. Node.js Working with files (461)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (320)
  2. Register and show online users and visitors (215)
  3. Node.js Move and Copy file (174)
  4. Read Excel file data in PHP - PhpExcelReader (159)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (156)