Css Course


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 type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
Centering lines of Text, Block or Image

Last accessed pages

  1. The Fifth Agreement (16865)
  2. Viewing the Flash Window (2386)
  3. SHA256 Encrypt hash in JavaScript (19647)
  4. Align DIVs on the same line (3069)
  5. PuzzleImg - Script to Create Image Puzzle Game (7088)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (220)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (211)
  3. Read Excel file data in PHP - PhpExcelReader (209)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (136)
  5. SHA256 Encrypt hash in JavaScript (134)