WordPress.org

Ready to get started?Download WordPress

Forums

How to center site navigation? (5 posts)

  1. Corse
    Member
    Posted 5 years ago #

    Hello i'm using the wp-page-numbers plugin at the bottom of my website as site navigation. But i want to have in centered. Website: http://www.alfablog.nl

    I'm using this line:
    <?php if(function_exists('wp_page_numbers')) { wp_page_numbers(); } ?>

    CSS:

    #wp_page_numbers ul, #wp_page_numbers li, #wp_page_numbers a {
    	background: #fff;
    	padding: 0;
    	margin: 0;
    	border: none;
    	text-decoration: none;
    	font-weight: normal;
    	font-style: normal;
    	list-style: none;
    	text-transform: none;
    	text-indent: 0px;
    	font-variant: normal;
    	text-align: left;
    	line-height: 12px;
    	letter-spacing: 0px;
    	word-spacing: 0px;
    }
    
    #wp_page_numbers {
    	margin-top: 10px;
    	width: 100%;
    	background: #fff;
    }
    #wp_page_numbers ul {
    	border-top: 1px solid #ccc;
    	width: 100%;
    }
    #wp_page_numbers li {
    	float: left;
    	display: block;
    }
    
    #wp_page_numbers a {
    	padding: 3px;
    	padding-left: 5px;
    	padding-right: 5px;
    	display: block;
    	color: #000;
    	font-family: Arial;
    	font-size: 12px;
    	border-top: 2px solid #fff;
    	border-bottom: 2px solid #fff;
    }
    
    #wp_page_numbers li a:hover {
    	color: #f33;
    	border-top: 2px solid #f33;
    	border-bottom: 2px solid #f33;
    }
    
    #wp_page_numbers li.space {
    	font-size: 12px;
    	font-family: sans-serif;
    	color: #000;
    	padding: 3px;
    	padding-left: 5px;
    	padding-right: 5px;
    	border-top: 2px solid #fff;
    	border-bottom: 2px solid #fff;
    }
    
    #wp_page_numbers li.first_last_page {
    	font-style: sans-serif;
    
    }
    
    #wp_page_numbers li.active_page a {
    	color: #fff;
    	background: #f33;
    	border-top: 2px solid #f33;
    	border-bottom: 2px solid #f33;
    
    }
    #wp_page_numbers li.active_page a:hover  {
    	color: #000; /* IE fix */
    	border-top: 2px solid #f33;
    	border-bottom: 2px solid #f33;
    }
    
    #wp_page_numbers li.page_info {
    	float: left;
    	font-size: 12px;
    	font-family: sans-serif;
    	color: #aaa;
    	display: block;
    	padding: 3px;
    	padding-right: 5px;
    	border-top: 2px solid #fff;
    	border-bottom: 2px solid #fff;
    }
  2. rmk80
    Member
    Posted 5 years ago #

    Hi,

    i would try to change this part:

    #wp_page_numbers {
    	margin-top: 10px;
    	width: 100%;
    	background: #fff;
    }

    which controls the outer div. try this:

    #wp_page_numbers {
    	margin: 10px auto;
    	background: #fff;
    }

    leuke site trouwens!

  3. Corse
    Member
    Posted 5 years ago #

    It doesn't work unfortunately. Maybe there's another way to center it?

  4. rmk80
    Member
    Posted 5 years ago #

    and this?

    #wp_page_numbers {
    	margin: 0 auto 0;
    	background: #fff;
    }
  5. Corse
    Member
    Posted 5 years ago #

    Doesn't do anything...

    I can center it, but it makes a list.

    Did it by changing:

    text-align: left;

    to

    text-align: center;

Topic Closed

This topic has been closed to new replies.

About this Topic