Title: Menu alignment help
Last modified: August 19, 2016

---

# Menu alignment help

 *  [shlinklincoln](https://wordpress.org/support/users/shlinklincoln/)
 * (@shlinklincoln)
 * [18 years, 1 month ago](https://wordpress.org/support/topic/menu-alignment-help/)
 * I added a image button to my menu bar but I cannot get it to center within the
   menu. I want the “Home” link and the “Message Board” button to be on the same
   line, in the center of the menu bar.
 * I’m sure I’m missing a simple snippet of code. Can anyone point me in the right
   direction?
 * [http://gcr.shlinklincolnsports.com](http://gcr.shlinklincolnsports.com)
 * Here’s the code:
 * [http://wordpress.pastebin.com/m5954bad7](http://wordpress.pastebin.com/m5954bad7)
 * Thanks in advance for any help.

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [whooami](https://wordpress.org/support/users/whooami/)
 * (@whooami)
 * [18 years, 1 month ago](https://wordpress.org/support/topic/menu-alignment-help/#post-705959)
 * you want that much larger image that is linked from photobucket.. to be in the
   center of your page, next to that smaller home link?
 * yuck, but ok..
 * Look at the source of the page:
 * `<li class="first current_page_item"><a href="http://gcr.shlinklincolnsports.
   com/" title="Home">Home</a></li>`
 *  `<li><a href="http://bullrock7.com/phpBB/viewforum.php?f=7"><img vertical-align
   ="center" src="http://i160.photobucket.com/albums/t190/shlinklincoln/Shlink%20LIncoln%
   20Sports/bullrock7.jpg" alt="Golf Card Discussion Forum" align="right"></a></
   li>`
 * Now give me a second .. Im looking at the CSS
 *  Thread Starter [shlinklincoln](https://wordpress.org/support/users/shlinklincoln/)
 * (@shlinklincoln)
 * [18 years, 1 month ago](https://wordpress.org/support/topic/menu-alignment-help/#post-705965)
 * Thanks for your help.
 * I made the image to be small enough to fit in the green menu bar. Does photobucket
   somehow mess that up?
 * I just want the image to sit right aligned in the middle of the menu, equal to
   the “Home.”
 * Maybe it is my image. Checking it out now.
 *  [whooami](https://wordpress.org/support/users/whooami/)
 * (@whooami)
 * [18 years, 1 month ago](https://wordpress.org/support/topic/menu-alignment-help/#post-705966)
 * you are forcing that image to be aligned to the right side of the page.. its 
   in the code I just pasted above. How do expect to style that if you are doing
   that.
 * I should have actually looked at that first; I didnt check what you had there
   until I removed ALL of your CSS and saw it pegged to the right border still.
 * Your putting that image inside an unordered list.
 * 1. Dont pin it to the side.
    2. Style the <`ul>` bits to place the entire list
   in the center. 3. Style the list items to align items to one another.
 *  Thread Starter [shlinklincoln](https://wordpress.org/support/users/shlinklincoln/)
 * (@shlinklincoln)
 * [18 years, 1 month ago](https://wordpress.org/support/topic/menu-alignment-help/#post-705967)
 * Image is 240 x 48. Should fit in the menu bar.
 *  Thread Starter [shlinklincoln](https://wordpress.org/support/users/shlinklincoln/)
 * (@shlinklincoln)
 * [18 years, 1 month ago](https://wordpress.org/support/topic/menu-alignment-help/#post-705969)
 * I get it. How can I align the picture in CSS? I’ll update the code to delete 
   out the alignment of the image.
 *  [whooami](https://wordpress.org/support/users/whooami/)
 * (@whooami)
 * [18 years, 1 month ago](https://wordpress.org/support/topic/menu-alignment-help/#post-705970)
 * Go get firefox.
 * Go get the web developer extension for firefox
 * Install it.
 * Open your site.
 * Right click in Firefox.
 * Go to web developer -> CSS -> Edit CSS
 * Play all you like.
 * (The pertinent CSS bits are going to be the ul li stuff inside #menu)
 * This stuff:
 *     ```
       #menu
       {
       	position: relative;
               text-align: left;
       	background-color: #008000;
       	height: 3.5em;
       	padding: 0 1.0em;
       	margin: 0 0 2px;
       }
       #menu ul
       {
       	padding:1em 0 0 0;
       	margin:0;
       }
       #menu ul li
       {
       	position: relative;
       	display: inline;
       	padding:0;
       	margin:0;
       }
       #menu ul li a:link, #menu ul li a:visited
       {
       	color: #fff;
       	padding: 0.5em 1.0em 0.9em 1.0em;
       	text-decoration: none;
       	border:none;
       }
       #menu ul li a:hover, #menu ul li a:active, #menu ul li.current_page_item a
       {
       	background-color: black;
       	border: none;
       }
       ```
   
 * Once you have played around with your CSS using the method above, you can copy
   and paste those changes into your style.css
 *  Thread Starter [shlinklincoln](https://wordpress.org/support/users/shlinklincoln/)
 * (@shlinklincoln)
 * [18 years, 1 month ago](https://wordpress.org/support/topic/menu-alignment-help/#post-705971)
 * Thank you.
 *  [whooami](https://wordpress.org/support/users/whooami/)
 * (@whooami)
 * [18 years, 1 month ago](https://wordpress.org/support/topic/menu-alignment-help/#post-705972)
 * you should also know that there are spaces in that image name. Thats a no-no,
   and you WILL encounter display issues having done that. Not all browsers are 
   kind enough to fix those sorts of oversights.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Menu alignment help’ is closed to new replies.

## Tags

 * [alignment](https://wordpress.org/support/topic-tag/alignment/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 8 replies
 * 2 participants
 * Last reply from: [whooami](https://wordpress.org/support/users/whooami/)
 * Last activity: [18 years, 1 month ago](https://wordpress.org/support/topic/menu-alignment-help/#post-705972)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics