2
林做一個投資組合網站，因爲我需要提供它的學校。 現在我正在嘗試在網頁中心對齊我的按鈕。我已經嘗試了很多， 給予李，ol和幾個類：text-align：center，margin-right/margin-left：auto。似乎沒有任何工作。我一直堅持1.5小時以上，所以如果你們中的一個人能夠幫助我解決這個問題，那將會很棒。康復中心整理我的按鈕
非常感謝！
諾亞
圖片瀏覽：https://imgur.com/EAQTdVM
HTML：
<div class="jumbotron">
<div class="container container-fluid">
<div class="row">
<div class="col-md-12 midden ">
<ol>
<li><a href="#" role="button">Contact</a></li>
<li><a href="#" role="button">Work</a></li>
</ol>
</div>
</div>
<div class="row">
<div class="col-md-3-offset-3">
<h1>Noah Wallaart</h1>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
Css:
.jumbotron {
background: url("/image/background4.JPG") no-repeat scroll center center/cover;
height: 720px;
margin-top: -20px;
}
div h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 50px;
color: white !important;
text-align: center;
margin-top: 0.2em;
}
p {
font-family: 'Open Sans', sans-serif;
font-size: 30px;
color: white;
}
a {
text-decoration: none;
color: black;
font-family: 'Open Sans', sans-serif;
border: 3px solid black;
padding: 10px 20px 10px 20px;
display: inline;
float: left;
margin: 20px;
}
li {
display: inline;
float: right;
}
a:hover {
text-decoration: none;
background-color: #BDBFBD;
color: white;
border: 3px solid white;
}
/* Lookbook */
section {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.row-margin {
margin-bottom: 20px;
margin-top: 20px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.less-padding {
padding: 0px;
}
/* Buttons */
li a {
text-decoration: none;
color: white;
font-weight: 200 font-family: 'Roboto', sans-serif;
border: 0.15em solid white;
padding: 10px 20px 10px 20px;
display: inline;
float: left;
margin: 20px;
}
li {
display: inline;
width: 120px;
}
a:hover {
text-decoration: none;
background-color: #BDBFBD;
color: white;
border: 3px solid white;
margin-bottom: 0px;
margin-left: 20px;
}
你應該將容器即'ol'設置爲'text-align：center'及其子元素，即'li'爲'display：inline-block; float：none;保證金：0 5px'，它肯定會使它居中對齊，並有一定的間距。 – vivekkupadhyay
@vivekkupadhyay謝謝，這工作得很好。感謝Bunch！ –