Article | Center Align Page Elements

Header Alignment



If you are looking to center align the Header Title, Description and Header image, look up our other guides - Header Image and Title Alignment (I) for Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe templates; and Header Image and Title Alignment (II) for the Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar and Simple II templates.



Center align all the elements



The general alignment codes are found in the stylesheet. Go to Template -> Edit HTML. If you want the elements in the sidebar to be in the center, try looking for this and insert the alignment code (shown in red):-

#sidebar-wrapper{ text-align:center; }

In different templates, the CSS classes are named differently. Hence, if you can't find the above, look for any of these and insert the code:-

#sidebar #sidebar-wrap #side .sidebar

Do not save the template. Preview the Template. The text and elements in the sidebar should be in the center and not aligned to the left.







In the same way, if you want the elements in the main post body to be in the center, add the code here:-

#main-wrapper{ text-align:center; }

If you don't see this in your template, try inserting the code under any of these or words to that effect and preview the template.

#main #main-wrap .main

To center align the Footer elements, the code can be inserted under any of these:-

#footer .footer

Center align one element



Suppose you want only one element to be aligned in the center. After you have created that element, be it a picture or widget or text, go to Template -> Edit HTML and scroll to somewhere near the bottom. Look for the widget ID. For example, if we have added a HTML code, a link list and a labels widget in the sidebar, we will see this:-

<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='HTML1' locked='false' title='HTML Code' type='HTML'/> <b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/> <b:widget id='Label1' locked='false' title='Labels' type='Label'/> </b:section> </div>

The highlighted text are the widget IDs. Scroll further up the template and insert after a } character the alignment code like this:-

#HTML1{ text-align:center; }

Replace the part in green with the relevant ID. This will center align only that particular page element.



DIV alignment tags



The other way to align an element is to insert the DIV alignment tags. Let's say you have created a HTML page element to insert a widget, image links, stat counter, etc. Insert these tags before and after the HTML Code to align that element in the center.

<div style="text-align:center;">HTML Code of widget</div>

Center align element in Blog Post



You may center align a picture, code, table, link or text within a blog post. Just block the part you want to put in the center and click the center-align icon in the Post Editor:-







Alternatively, you can switch from the “Compose” mode to the “Edit HTML” mode. Insert these tags and what goes in between will be in the center.

<div style="text-align:center;">TEXT TO BE CENTERED</div>

Loading...