How to Center in CSS

Even though there is a left and right way to center an element using float, there is no way to center an object using center {float:center….}, even though that seems intuitive. The only way to do it is to change the {….margin-right:4%;…} from a percentage to  {….margin-right:0 auto;…}.

 

 

Left and Right Justify an Element

{ float:left; ……}

{float:right……}

 

Horizontally Center an Element

{ float:left; margin-right:0 auto; ….}

 

Here is an example from Elegant Theme’s Shortcodes.

To center justify the columns in the body of a page using Elegant Themes shortcodes, edit the shortcodes.css from:

.one_half, .one_third, .two_third, .one_fourth , .three_fourth { float:left; margin-right:4%; position:relative; }

to:

.one_half, .one_third, .two_third, .one_fourth , .three_fourth { float:right; margin-right:0 auto; position:relative; }

Add this to the end of style.css:

.one_fourth {margin-right: 11%;!important;}