开发者

position links at the middle of div bar

I like to do the following using css:

Have a div bar 100pt from top of the page. The div bar will be about 100pt thick. Then at the "middle" of the div bar I like to have the menu options. I got the following so far, however the menu items (links) are not 开发者_StackOverflowcentred:

.top_header {
    background-color:#3B5998; 
    height:70px; 
    margin-left:0px; 
    margin-right:0px; 
    top:60px; 
    position:relative 
}

.top_header a, .top_header a:visited, .top_header a:hover, .top_header a:active, .top_header a:focus {
    color:white; 
    font-size:x-large; 
    font-family:Arial
}


One way to do this is to add line-height, setting it as the same height as the div.

line-height:70px; 

http://jsfiddle.net/jasongennaro/EXqkT/

This aligns it vertically.

Then, if you want to center it horizontally, you can add

text-align:center;

http://jsfiddle.net/jasongennaro/EXqkT/1/


Add

`text-align:center;'

to .top_header.


add style text-align:center; to top_header div http://jsfiddle.net/rajani5022/CpsX2/4/


add margin:auto to .top_header a

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜