中心按钮的可能模式

我正在创建一个主页，为此我在视口上放置了一个导航栏。导航栏包含应该关注的按钮，从一个部分导航到另一个部分。但实际上他们被放置在左边。无论是否有2,3,4或5+按钮，我都希望它们完全居中。整个“按钮行”应该完全居中。中心按钮的可能模式

还是以图片说话：

enter image description here

什么是共同/可能的方式做到这一点？

我想到的唯一模式是将宽度添加到按钮home和ubuntu，最后添加margin 0 auto。

我navigationbar.css（紫色条）：

#navigationBar { 

    background-color:#660099; 

    } 

.navigationButton { 

    background-color:transparent; 
    border-bottom:2px solid transparent; 
    display:inline-block; 
    cursor:pointer; 
    color:#ffffff; 
    font-family:arial; 
    font-size:17px; 
    padding:16px 31px; 
    text-decoration:none; 
    text-shadow:0px 1px 0px #2f6627; 

    } 

.navigationButton:hover { 

    background-color:transparent; 
    border-bottom:2px solid #18ab29; 
    } 

.navigationButton:active { 

    position:relative; 
    top:1px; 

    }

我home.html的：

<!DOCTYPE html> 
<html> 

    <head> 
    <title>Ubuntu</title> 
    <link rel="stylesheet" type="text/css" href="style/general.css" /> 
    <link rel="stylesheet" type="text/css" href="style/navigationBar.css" /> 
</head> 

<body> 
    <div id="navigationBar"> 
    <a href="home.html" class="navigationButton">Home</a> 
    <a href="ubuntuOverview.html" class="navigationButton">Ubuntu</a> 
    </div> 
</body> 

</html>

希望有人能帮助！

来源

2015-04-03 MMike

补充一点： -

#navigationBar { 
    background-color:#660099; 
    text-align:center; 
    }

来源

2015-04-03 10:28:49

尼斯，这是工作好！但是，为什么我可以把作为一个文本？它是否以每个元素为中心，如内部div。一点点的解释会很好.. – MMike 2015-04-03 11:32:59

是的，这个概念将适用于所有元素。但也要检查一下是否是“内联”或块元素。 – 2015-04-03 11:52:27

您可以使用CSS3 Flexbox的规范，这是为这个目的而设计的。基本上，您所需要的只是将父容器设置为display: flex，并集中验证其内容，即justify-content: center。

#navigationBar { 
 
    background-color: #660099; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.navigationButton { 
 
    background-color: transparent; 
 
    border-bottom: 2px solid transparent; 
 
    cursor: pointer; 
 
    color: #ffffff; 
 
    font-family: arial; 
 
    font-size: 17px; 
 
    padding: 16px 31px; 
 
    position: relative; 
 
    top: 0; 
 
    text-decoration: none; 
 
    text-shadow: 0px 1px 0px #2f6627; 
 
} 
 
.navigationButton:hover { 
 
    background-color: transparent; 
 
    border-bottom: 2px solid #18ab29; 
 
} 
 
.navigationButton:active { 
 
    top: 1px; 
 
}

<div id="navigationBar"> 
 
    <a href="home.html" class="navigationButton">Home</a> 
 
    <a href="ubuntuOverview.html" class="navigationButton">Ubuntu</a> 
 
</div>

来源

2015-04-03 10:29:58 Terry

谢谢你的回答。我对这种解决方案感兴趣..与Maddys解决方案相比，有什么优势吗？ – MMike 2015-04-03 11:26:00

内嵌块元素的唯一问题是它们之间的空白符，如果它们被输入到HTML中的新行中，按照内联元素，任何空白符将被合并为单个空白符并按此处理。 Flexbox还可以轻松处理一些布局变化:) – Terry 2015-04-03 15:51:33

.navigationParent{ 
text-align:center; 
} 
.navigationBar{ 
display:inline-block; 
}

如果酒吧dispaly设置为inline-block的那么textalin：中心会为它工作：

<div class="navigationParent"> 
    <div class="navigationBar"> 
      <a href="home.html" class="navigationButton">Home</a> 
      <a href="ubuntuOverview.html" class="navigationButton">Ubuntu</a>  
    </div> 
</div>

来源

2015-04-03 10:36:41

中心按钮的可能模式

回答

相关问题