2013-06-27 3 views
1

У меня есть горизонтальное меню 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 скрипку: http://jsfiddle.net/y75WZ/

любые идеи, что я могу сделать?

ответ

-1

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

... Возможно, вы имеете в виду text-align:center?

0

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

Используйте простой text-align: center;.

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

Btw. что вы здесь пытались:

#menu не имеет прямых потомков, которые являются li.

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

Использование ниже 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/