Horizontal and vertical centering

From Joomla! Documentation

Revision as of 05:36, 17 December 2011 by Praveenkumar31 (Talk | contribs)

To center any of the object in html document using .css or center 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-left:0px; 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; }