Horizontal and vertical centering
| This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment. If you would like to try writing this article you're welcome to do so.
The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar. ---Thank you. This article was last edited by Praveenkumar31 (talk| contribs) 16 months ago. (Purge) |
- 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.
- 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 */ }
- 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; }
- 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; }
- navcontainer ul li a:hover
{ background-color: #369; color: white; }