center align the text in menu item

Question

I am working this site My Site The primary menu item Post An Ad has a red color background to it.Primary Menu has a dashed border.as the Post an ad item Background is big and is touching the the primary menu border i have changed the css into this

.header_menu_res ul a.rb_btn_postanad {
background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 23px;
padding-left: 50px;
padding-right: 30px;
font-weight: bold;
font-size: 20px;
line-height: 20px;
margin-left: 20px;
border-right: 1px solid #831617;
border-left: 1px solid #831617;
color: #fff;
height: 10px;
margin-top: 5px;
}

The css was actualy this

.header_menu_res ul a.rb_btn_postanad {
background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 23px;
padding-left: 50px;
padding-right: 30px;
font-weight: bold;
font-size: 20px;
line-height: 20px;
margin-left: 20px;
border-right: 1px solid #831617;
border-left: 1px solid #831617;
color: #fff;
    }

I added

height: 10px;
margin-top: 5px;

which gave me the desired result.But the problem now is the text inside is not inside the middle of the menu item.I have tried adding padding top but it didn't help. Can anyone please help me in making it in the middle of the menu item.Thanks!!

Answer 1

Change your class css to followings

.header_menu_res ul a.rb_btn_postanad {background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 17px;
line-height: 11px;}

I checked this solution and it works.
Hope this will help you.

Answer 2

You should add this css to your css

.header_menu_res ul a.rb_btn_postanad {background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 17px;
line-height: 11px;}

This will work for you. Also change for hover class similar to above.

Answer 3

You simply forgot the top/bottom padding then you need to update the plus icon's position.

.header_menu_res ul a.rb_btn_postanad {
    background: #981817 url(images/rb_btn_addnew.png) no-repeat 23px 18px;
    padding-left: 50px;
    margin: 5px 0 0 20px;
    padding-right: 15px 30px 15px 50px;
    font-weight: bold;
    font-size: 20px;
    line-height: 20px;
    border-right: 1px solid #831617;
    border-left: 1px solid #831617;
    color: #fff;
}

Answer 4

Add these:

.header_menu_res ul li {
    display: table;
}

a.rb_btn_postanad {
    display: table-cell;
    vertical-align: middle;
}

That will work.

Answer 5

Hi remove this attribute:

.header_menu_res ul a.rb_btn_postanad
  {
    margin-top:0px;
    height:10px;
  }