Question

我有一个CSS水平菜单，其下方有一个顶部边框和文字。

我需要将文本放在边界线中心的顶部边框下方：

#topbar {
    width:100%;
    height:80px;
    background-color:#000000;
}
#topbar-inner {
    width:1000px;
    margin:0 auto 0 auto;
}
#logo {
    display:inline;
    float:left;
    color:#FFFFFF;
}
#menu {
    display:inline;
    float:right;
}
#menu > ul > li {
    display:inline-block;
/*    border-top:4px solid #666666; */
    margin-right:20px;
   /* padding-top:20px; */
    min-width:120px;
}
#menu > li {
    display:inline-block;
    list-style:none;
    /* margin-top:25px; */
    margin-left:auto;
    margin-right:auto;
}
#menu > li:hover {
    color:#FFFFFF;
}
#menu li a {
    display:block; 
    padding-top:25px;   
    border-top:4px solid #CCCCCC;
    color: #CCCCCC;
    text-decoration:none;
}
#menu li a:hover { 
    border-color:#FFFFFF; 
    color:#fff
}

JS FIDDLE：http://jsfiddle.net/y75WZ/

任何想法我能做什么？

Answer 1

...你的意思是text-align:center列表项目吗？

Answer 2

http://jsfiddle.net/y75WZ/1/

使用简单的text-align: center;。

#menu li a {
    text-align: center;
    /* ... */
}

顺便说一下。你在这里尝试的是什么：

#menu没有任何li的直接后代。

#menu > li {
    display:inline-block;
    list-style:none;
    /* margin-top:25px; */
    margin-left:auto;
    margin-right:auto;
}
#menu > li:hover {
    color:#FFFFFF;
}

Answer 3

使用以下css

#menu li a {
    display:block; 
    padding-top:25px;   
    border-top:4px solid #CCCCCC;
    color: #CCCCCC;
    text-decoration:none;
    text-align: center;
}

我刚刚更改了您的代码，下面是新的小提琴，它是您代码的修改版本。检查下面的小提琴 http://jsfiddle.net/y75WZ/3/

Answer 4

text-align:center li或a内的li标记应该这样做。

#menu li a {
    display:block; 
    padding-top:25px;   
    border-top:4px solid #CCCCCC;
    color: #CCCCCC;
    text-decoration:none;
    text-align:center;
}

或

#menu li {
     text-align:center;
}

如何使文本居中于顶部边界

4 个答案: