Css Align By Margin,position And Float Property

Css align horizontal:

In css there are some properties used for horizontal align. Text alignment also helpful for you. Margin, position, float is very important property for css align.

css align block element:

A block element is an element that takes up the full width available, and has a line break before and after it.

For example <p> , <a> , <div> are block element.

Use of margin property for alignment:

The element can be align by margin left and margin right property.

Syntax:

selector
{margin-left:auto;
margin-right:auto;
width:50%;
background-color:blue;}

You can use persent of pixel for width.

Here is a example for align a paragraph center of browser.

Example:

<html>

<head>

<style type="text/css">

.center

{margin:auto;

width:50%;

background-color:blue;}

</style>

</head>

 <body>

<div>

<p>However, in 2005, the Web Hypertext Application Technology Working Group (WHATWG) formed, independently

of the W3C, to work on advancing ordinary HTML not based on XHTML.</p>

<p>The WHATWG eventually began

working on a standard that supported both XML and non-XML serializations, HTML5, in parallel to W3C standards

such as XHTML 2</p>

</div>

</body>

</html>

Output:css align margin

Left and Right by position of css float :

Its very simple in css to put a paragraph or any content of web page on left or right. Though left is done by defult on browser.

Place right a paragraph:

Syntax:

Selector
{position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;}

Example:

<html>

<head>

<style type="text/css">

#right

{position:absolute;

right:0px;

width:300px;

background-color:#b0e0e6;}

</style>

</head>

<body>

<div ID="right">

<p>However, in 2005, the Web Hypertext Application Technology Working Group (WHATWG) formed, independently

of the W3C, to work on advancing ordinary HTML not based on XHTML.</p>

<p>The WHATWG eventually began

working on a standard that supported both XML and non-XML serializations, HTML5, in parallel to W3C standards

such as XHTML 2</p>

</div>

</body>

</html>

Outputcss align position

Left and Right by float:

In css align it is also a way for place content on left or right of browser.

Syntax:

selector
{float:right;
width:300px;
background-color:# 5e696d;}

Example:

<html>

<head>

<style type="text/css">

#right

{float:right;

color:#ffffff;

width:300px;

background-color:#5e696d;}

</style>

</head>

<body>

<div ID="right">

<p>However, in 2005, the Web Hypertext Application Technology Working Group (WHATWG) formed, independently

of the W3C, to work on advancing ordinary HTML not based on XHTML.</p>

<p>The WHATWG eventually began

working on a standard that supported both XML and non-XML serializations, HTML5, in parallel to W3C standards

such as XHTML 2</p>

</div>

</body>

</html>

Output:css align float
You can get more about float in css float property article.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.