Horizontal and vertical centering

From Joomla! Documentation

Revision as of 05: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; }