Question

我正在尝试制作一个水平导航菜单，我的菜单项（li）元素是圆形的，这里是demo，我的问题是链接的文字出现在顶部，我该怎么办让它出现在中心，这是可能的，请让我知道，欢迎任何建议。感谢

Answer 1

只有块项可以使用边距和填充。锚标签是内联元素。你需要强制它们成为CSS中的块元素：

#menu ul li a
{
    text-decoration:none;
    display:block;
    padding:30px 0 0 0;
}

Answer 2

如果文本流过2行，您可以使用它来保持中间位置：

#menu ul li a
{
    display:table-cell;
    vertical-align:middle;
    height:85px;
    width:35px;
}

第二个问题的答案：

#menu ul li:hover
{
    background:red;
}

Answer 3

回答您在回应Diodeus时发布的第二个问题：

如果你想使用纯css3悬停效果，你可以通过使用：hover选择器来做类似的事情：

#menu ul li a:hover {
   background-color: #000000;
   }

要获得更好的效果，请使用CSS3过渡属性，您可以在此处看到：

http://www.w3schools.com/css3/css3_transitions.asp

Answer 4

不要弄乱垂直对齐，而是将行高设置为等于圆的高度/宽度。

你没有采用红色背景的问题是它所声明的选择器的特殊性：li:hover不足以克服#menu ul li中的原始bg颜色声明。

请参阅此处：http://jsfiddle.net/Az8cG/11/了解这两项修补程序。

Answer 5

我只是玩弄你的小提琴。我做的只是做了“li”显示：inline-block＆amp;改变了li：hover to #menu li：hover。

#menu ul li
{
    float:left;
    display:inline-block;
    padding:40px 30px;
    background-color:slategray;
    margin:0 20px 0 0;
    height:17px;
   -webkit-border-radius:50px;
}
#menu li:hover
{
   -webkit-box-shadow:0 0 50px 12px #69CDF5;
  background:#cb2326;  
}

请在此处查看小提琴：http://jsfiddle.net/Az8cG/15/

当li元素为圆形时，如何使锚标记的文本出现在中心

5 个答案: