MyBB Community Forums

Link: http://forumsource.org
CSS (of nav bar):

.menu ul {
	background:#000000 url(images/problue/nbg.png);
	list-style-type:none;
	width:100%;
	height:50px;
	margin:0;
	padding:0;
	}

.menu li {
	float:left;
	}

.menu ul a:link {
	color:white;
	display:block;
	padding:15px;
	text-align:center;
	text-decoration:none;
	}

.menu ul a:visited {
	color:white;
        display:block;
        padding:15px;
        text-align:center;
        text-decoration:none;
}

.menu ul a:active {
	color:white;
        display:block;
        padding:15px;
        text-decoration:none;
}

	
.menu ul a:hover {
	background:url(images/problue/nbgh.png);
	height:20px;
	}

As you can see I've added text-align:center, but for some reason it never works. I did some researching and on W3Schools it said that text-align wouldn't make a difference when the width was 100% which mine is... So, is there anyway to resolve this and center the links, or is it impossible?

Have you tried adding text-align: center; to .menu ul? That should work.

(2011-08-05, 03:53 PM)NaXuh Wrote: [ -> ]Have you tried adding text-align: center; to .menu ul? That should work.

Unfortunately that didn't work either.

Oh, my mistake. Do you have a css class for ".menu"? If you have just that, add text-align: center; to that class and it should work.

So create this?

.menu {
text-align:center;
}

Edit: That didn't work.

Hey,

After messing around with this for awhile I think I have fixed it. Try replacing the code you gave in the original post with this:

.menu ul {
    background:#000000 url(images/problue/nbg.png);
    list-style-type:none;
    width:100%;
    height:50px;
    margin:0;
    padding:0;
	text-align: center;
    }

.menu li {
    display: inline;	
    }

.menu ul a:link {
    color:white;
    display: inline-block;
    padding:15px;
    text-align:center;
    text-decoration:none;
    }

.menu ul a:visited {
    color:white;
        display: inline-block;
        padding:15px;
        text-align:center;
        text-decoration:none;
}

.menu ul a:active {
    color:white;
        display: inline-block;
        padding:15px;
        text-decoration:none;
}

    
.menu ul a:hover {
    background:url(images/problue/nbgh.png);
    height:20px;
    }

Hope this helps. .