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; }
