Forums

Centering Autonav

Permalink
Hi Folks,

Back again with more newbie questions..

I've made up an Autonav template the best I can. What I've got is square elements for each li item and got the text vertically aligned how I want it, Great! But....

I can't get them centered.
Any ideas?

This is the CSS:
.g-square-box{
    display: inline-block;
    margin: .75em;
    list-style: none;
}
.g-square-box li > a{
    width: 6em;
    height: 6em;
    background: #00A053;
    text-align: center;
    border: 2px;
    border-style: solid;
    border-radius: 4px;
    border-color: black;
}
Viewing 15 lines of 29 lines. View entire code block.


and this is the view.php with most the comments taken out.

<?php defined('C5_EXECUTE') or die("Access Denied.");
$navItems = $controller->getNavItems();
$c = Page::getCurrentPage();
foreach ($navItems as $ni) {
    $classes = array();
    $classesLi = array();
    $classesUl = array();
    $classesA = array();
    $attributesA = array();
    if ($ni->isCurrent || $ni->inPath) {
        $classesLi[] = 'active';
    }
    if ($ni->hasSubmenu) {
        $classes[] = 'dropdown';
        $classesLi[] = 'dropdown';
Viewing 15 lines of 35 lines. View entire code block.


Obviously this is a very simplified version of what I would like:
http://jsfiddle.net/NpLR3/
gavthompson
 
hutman replied on at Permalink Reply
hutman
I'm a little confused about why you are styling the same a tag in two different ways, but none the less I think your a needs a display: block; and that will likely fix it.
gavthompson replied on at Permalink Reply
gavthompson
Hi Hutman,

I took your advise and cleaned up the 'a' tag,

.g-square-box{
    display: inline-block;
    margin: .75em;
    list-style: none;
}
.g-square-box span a {
    display:table-cell;
    font-size: 1.2em;
    line-height: 1.3;
    vertical-align: middle;
    padding: .2em;
    color: white;
    width: 6em;
    height: 6em;
    background: #00A053;
Viewing 15 lines of 27 lines. View entire code block.

thanks.
I think it was remnants from when I was trying to make the squares responsive which I already gave up on.
http://codeitdown.com/css-square-rectangle/... is the article I was following but I couldn't pull it off.

Anyway display block didn't work, if I us block on the '.g-square-box' class everything lines up on the left side vertically and if I put it on the '.g-square-box span a' class the boxes don't line up straight and it kills my vertical aligned text because I'm not using the table-cell display.

Anymore ideas?
gavthompson replied on at Permalink Best Answer Reply
gavthompson
Well managed to figure it out, I need to add:

.nav-pills{
    text-align: center;
}


and it works perfect, centered autonav and vertically aligned text in squares!

Full CSS below if anyone ever needs it in future.
.nav-pills{
    text-align: center;
}
.g-square-box{
    display: inline-block;
    margin: .75em;
    list-style: none;
}
.g-square-box span a {
    display:table-cell;
    font-size: 1.2em;
    line-height: 1.3;
    vertical-align: middle;
    padding: .2em;
    color: white;
Viewing 15 lines of 29 lines. View entire code block.