Centering content css

Centering content in the browser

Difficulty: Easy

Estimated Completion Time: 5 Mins

Version: 1.7+

In this tutorial we follow on from an earlier tutorial entitled tab-menus. We will build on this example by now centering the logo and menu system using CSS. You will first need to Login to the dashboard builder to start the tutorial.

Step1 – task is to assign both the widgets we want to center an equal width.

To do this first edit the dashboard from the earlier tutorial by locating it in the dashboard list. Once inside the edit session now locate and press the spanner icon for the logo widget [#widget1) and the tab menu widget (#widget2). While inside the edit properties dialog locate the width property and set its value to 1000. Now just press enter to save and close the dialog. Advanced users could also assign the width using CSS as follows.

[snippet id=”12″]

Step 2 – Now for the magic CSS!

To center the logo and menu system add the following code snippet to the bottom of the CSS Style sheet property. This property is located in the edit dashboard window. To access the Edit dashboard window press the spanner in the top right hand corner of the dashboard builder screen.

[snippet id=”11″]

That’s all done. Please enjoy your new menu system! View the dashboard using the View dashboard button located in the top right section of the dashboard builder. Try and resize the screen or access it from a different device like a mobile and you will notice everything remains central. The trick is to set the left margin property of the widget to half it’s overall width.

TIP

You can check the widget id of any widget on your dashboard by simply hovering the mouse over the widget you want to know the if of. You will notice the id and co-ordinates of the widget appear in the bottom right hand corner of the dashboard builder screen.

For extra information, guidance and troubleshooting consult:

Leave a Reply