链接按钮中的文本中心？

问题描述：

我在网页上有一个水平导航栏，我需要将内容居中。同样由于某种原因，它还是向后...而不是从左到右依次是主页，商店，关于和联系人。它是联系，关于，商店，然后是家。链接按钮中的文本中心？

我需要知道A：如何将它打开并且 B：如何将按钮中的文本居中？

这里是我的所有代码：

<div id="masthead"></div> 
<h1>American Backcountry</h1> 
</div><!-- end masthead --> 
<ul id="mainnav"> 
    <li><a href="index.htm">Home</a></li> 
    <li><a href="shop.htm">Shop</a></li> 
    <li><a href="about.htm">About</a></li> 
    <li><a href="contact.htm">Contact</a></li> 
    </ul>

而CSS：

#mainnav{ 

    height:30px; 
    background-color: black; 
    margin: 0; 
    padding-right: 45px; 
    } 

#mainnav li{ 
    display:inline-block; 
    background-color: #6a4622; 
    float:right; 
    padding-right: 45px; 
    border:1px solid; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    margin-left: 3px; 
    width: 40px; 
} 

#mainnav a:link{ 
    display: block; 
    height: 28px; 
    color:#dfd098; 
    text-decoration: none; 
    font-weight:bold; 
    font-size: 12px; 
    text-transform: uppercase; 
    text-align: center; 

}

EDIT（答案被接受后）

好吧，我能中心的一切，得到它挂在右边。

现在，我需要更改只有首页链接的颜色，并更改文字颜色...我会如何做到这一点？我需要瞄准家庭链接。

您的浮动：正确的导致相反的顺序。 – Fundhor

谢谢，我解决了这个问题，但现在它移到了左边......我如何将它保留在我的页面右侧，但是为了保持顺序？还需要将文字居中......？ – Sylvia585

嗨西尔维亚，堆栈溢出的问题和答案旨在为现在和将来的所有站点用户提供参考。通过删除原来的问题并将其替换为完全不同的问题，原来的答案再也没有意义了。我希望你不介意，但我已经恢复了原来的问题。不过，我还在原始帖子的底部发布了第二个问题作为更新。 –

答

我有一个网页上的水平导航栏，我需要将内容居中。还因为某种原因，它是向后的...而不是从左到右是主页，商店，关于和联系人。它是联系，关于，商店，然后是家。

原因是代码中的float: right属性。有了这个属性，你的元素将按照它们在代码中出现的顺序从右到左显示，让你感觉它们是向后的。

您是否碰巧知道如何让我的Home链接的颜色和文字颜色与其他三种不同？

我建议您阅读关于CSS Selectors和Pseudo-classes的更多信息。

#mainnav { 
 
    background-color: #dedede; 
 
    margin: 0; 
 
    padding-right: 45px; 
 
    text-align: right; 
 
} 
 
#mainnav li { 
 
    display: inline-block; 
 
    background-color: #6a4622; 
 
    border: 1px solid; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    margin-left: 3px; 
 
} 
 
#mainnav a { 
 
    display: block; 
 
    padding: 10px 15px; 
 
    color: #dfd098; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
} 
 
#mainnav li:first-child a { 
 
    color: #fff; 
 
}

<div id="masthead"></div> 
 
<h1>American Backcountry</h1> 
 
<!-- end masthead --> 
 
<ul id="mainnav"> 
 
    <li><a href="index.htm">Home</a> 
 
    </li> 
 
    <li><a href="shop.htm">Shop</a> 
 
    </li> 
 
    <li><a href="about.htm">About</a> 
 
    </li> 
 
    <li><a href="contact.htm">Contact</a> 
 
    </li> 
 
</ul>

太棒了！但现在它位于导航栏的中心......我该如何将它放到页面的右侧？ – Sylvia585

我以为你想要它在中心。在那里你去，更新它显示在右侧的链接 – Romulo

美丽！非常感谢！！！有效！ – Sylvia585

答

你可能要考虑使用flexbox。

Flexbox的的好处是：

最少的代码，所以它的效率
中心，垂直和水平，既简单又容易
它的响应
它代表CSS的未来布局

CSS

#mainnav { 
    display: flex; /* NEW - establish flex container */ 
    justify-content: flex-end; /* NEW - right-align flex items (li) */ 

    height: 30px; 
    background-color: black; 
    margin: 0; 
    padding-right: 45px; 
    list-style: none; 
    } 

#mainnav li { 
    /* display:inline-block; */ 
    background-color: #6a4622; 
    /* float:right; */ 
    /* padding-right: 45px; */ 
    border:1px solid; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    margin-left: 3px; 
    width: 75px; 
    display: flex; /* NEW - establish (nested) flex container */ 
    justify-content: center; /* center text horizontally, in this case */ 
    align-items: center; /* center text vertically, in this case */ 
} 

#mainnav a:link{ 
    /* display: block; */ 
    height: 100%; /* adjusted */ 
    color:#dfd098; 
    text-decoration: none; 
    font-weight:bold; 
    font-size: 12px; 
    text-transform: uppercase; 
    /* text-align: center; */ 
}

DEMO：http://jsfiddle.net/nhp0gsw6/1

注意Flexbox将被所有主流浏览器，支持except IE 8 & 9。

链接按钮中的文本中心？

相关推荐