中心对齐菜单项中的文本

时间:2014-05-21 04:24:49

标签: html css wordpress menuitem

我正在使用此网站My Site主要菜单项发布广告具有红色背景。主菜单有一个虚线边框。发布广告项目背景为大,正在触摸主菜单边框我已将css更改为此

.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;
}

css实际上就是这个

.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;

给了我想要的结果。但现在的问题是里面的文字不在菜单项的中间。我试过添加填充顶部但它没有帮助。任何人都可以帮我在菜单项中间制作它。谢谢!!

5 个答案:

答案 0 :(得分:3)

将您的班级css更改为以下

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

我检查了这个解决方案并且有效。
希望这会对你有所帮助。

答案 1 :(得分:2)

您应该将此css添加到您的css

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

这对你有用。 也改变类似于上面的悬停类。

答案 2 :(得分:1)

您只是忘记了上/下填充,然后您需要更新加号图标的位置。

.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;
}

答案 3 :(得分:1)

添加以下内容:

.header_menu_res ul li {
    display: table;
}

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

这将有效。

答案 4 :(得分:1)

您好删除此属性:

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