集中分区菜单的文字和图像？答案

【问题标题】：Centralize the words and image of the partition menu?集中分区菜单的文字和图像？
【发布时间】：2014-11-04 03:19:34
【问题描述】：

如何使分区菜单的文字和图像居中？

ul # top-menu li {     
  padding-left: 19px; 
  background: url (images / menu-bg.png) no-repeat right 3px; 
}

网站是 dev.fatorzen.com

【问题讨论】：

标签： css wordpress menu

【解决方案1】：

菜单中的项目ul#top-menu li 有一个padding-left: 19px。如果您删除该文本将居中。

【讨论】：

我不明白。
我认为将您的代码更改为ul#top-menu li { background: url('images/menu-bg.png') no-repeat right; } 会使文本居中。也许我不明白你的问题，在这种情况下，我建议多解释一下
图片menu-bg.png与名称右侧对齐。必须居中
喜欢ul#top-menu li { background: url('images/menu-bg.png') no-repeat center; }?
现在只有图片居中，文字没有。

【解决方案2】：

ul#top-menu li {
/* padding-left: 19px;  Remove this */
background: url(images/menu-bg.png) no-repeat right 3px;
margin: 0 auto; /* added this */
display: inline-block; /* added this */
}

.nav li {
/* float: left; Remove this */
position: relative;
}

ul#top-menu {
float: left;
width: 100%; /* added this */
text-align: center; /* added this */
margin: 0 auto; /* added this */
}

当你应该使用 inline-block 时你浮动元素，这样你就可以正确地居中。

【讨论】：