中心按钮的可能模式
我正在创建一个主页,为此我在视口顶部放置了一个导航栏.导航栏包含按钮,用户应该将注意力从一个部分导航到另一个部分.但实际上它们位于左侧.如果有2,3,4或5+按钮,我希望它们完全是中心.整个"按钮线"应该完全居中.
或者在图片中说话:
实现这一目标的常见/可能模式是什么？
我在心中唯一的模式是宽度添加到该按钮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>
希望有人可以帮忙!
加上这个: -
#navigationBar {
background-color:#660099;
text-align:center;
}