Center align div elements in Microsoft Expression Web

Div based layouts and table based layouts are the popularly used layout web pages. Though each layout has its own set advantages and disadvantages, designers now prefer div based CSS layouts.  Aligning a table was a line of code, but aligning divs is not the same. In earlier versions of HTML and CSS you could center align the <div> simply by:

<div align=”center”>

Sample text

</div>

But the align attribute of <div> element was deprecated in HTML 4.01 and is not supported in XHTML 1.0 Strict DTD. Hence you cannot center your divs like this anymore.

To align a div in Microsoft Expression Web follow these steps:

1.       Create a new style for the div element or modify its existing style from the Apply/Manage Styles task pane.

2.       In the New Style/Modify Style dialog box choose the Box category.

3.       Uncheck the checkbox ‘margin: same for all’ and set the left and right margin values to auto from the corresponding drop down.

     

 

The ‘auto’ value tells the margin property to figure out the value on its own, based on the available space. Since both would struggle for the same space they would settle in the middle. This would center the div leaving an equal margin space on both the sides.

4.       Click on Apply or OK to save the changes.