Horizontal and vertical centering

From Joomla! Documentation

Revision as of 04:33, 17 December 2011 by Praveenkumar31 (Talk | contribs)

You can center any of the object in html document using .css or

tag .If you are using Joomla your joomla menu are unordered list
  • and items in side the menu are with
  • .

    You can use following css in your css script file. CSS file with file name centerObj.css for 100X100 object. .centerelement {

    width: 100px;

    height: 100px;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-left: -50px;

    margin-top: -50px;


    or you can use: .centerelement {


    margin-right:0px; }

    and import it into your joomla document using

    JHTML::stylesheet(centerObj, $path); $path = path to your document.

    For ordered and unordered List in joomla

    Add the below code to your template.css related to joomla template.

    1. navcontainer ul


    text-align: center;

    padding-bottom: 5px;

    padding-top: 5px;

    padding-left: 0;

    margin-top: 0;

    /* cancels gap caused by top padding in Opera 7.54 */

    margin-left: 0;

    background-color: #036;

    color: white;

    width: 100%;

    font-family: Arial,Helvetica,sans-serif;

    line-height: 18px;

    /* fixes Firefox 0.9.3 */ }

    1. navcontainer ul li


    display: inline;

    padding-left: 0;

    padding-right: 0;

    padding-bottom: 5px;

    /* matches link padding except for left and right */

    padding-top: 5px; }

    1. navcontainer ul li a


    padding-left: 10px;

    padding-right: 10px;

    padding-bottom: 5px;

    padding-top: 5px;

    color: white;

    text-decoration: none;

    border-right: 1px solid #fff; }

    1. navcontainer ul li a:hover


    background-color: #369;

    color: white; }