无法居中对齐我的按钮
Cant center allign my buttons
我正在制作一个作品集网站,因为我需要把它送到学校。
现在我正在尝试将我的按钮在网页上居中对齐。我已经尝试了很多,
为 li、ol 和几个 class 提供: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;
}
当您使用 Bootstrap 时,您不想覆盖框架提供的属性。相反,您需要做的就是给容器 text-center
class 它应该可以正常工作。
<div class="jumbotron">
<div class="container container-fluid">
<div class="row">
<div class="col-md-12 text-center"> <!-- THIS LINE CHANGED -->
<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>
我们开始吧,添加这些样式
.midden ol {
margin-top: 0;
margin-bottom: 10px;
display: table;
margin: 0 auto;
}
.midden li{
float: none;
}
.midden ol {
margin-top: 0;
margin-bottom: 10px;
display: table;
margin: 0 auto;
}
.midden li{
float: none;
}
.jumbotron {
background: url("http://www.govisitcostarica.com/images/photos/full-hot-air-balloons-near-arenal.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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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>
您的某些标记已关闭,'midden' 不是一个词,您所要做的只是 'text-center' 行 并且它工作正常。祝你好运!
<div class="jumbotron">
<div class="container container-fluid">
<div class="row text-center">
<div class="col-md-12">
<ul class="list-unstyled list-inline">
<li><a href="#" role="button">Contact</a></li>
<li><a href="#" role="button">Work</a></li>
</ul>
</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>
我正在制作一个作品集网站,因为我需要把它送到学校。 现在我正在尝试将我的按钮在网页上居中对齐。我已经尝试了很多, 为 li、ol 和几个 class 提供: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;
}
当您使用 Bootstrap 时,您不想覆盖框架提供的属性。相反,您需要做的就是给容器 text-center
class 它应该可以正常工作。
<div class="jumbotron">
<div class="container container-fluid">
<div class="row">
<div class="col-md-12 text-center"> <!-- THIS LINE CHANGED -->
<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>
我们开始吧,添加这些样式
.midden ol {
margin-top: 0;
margin-bottom: 10px;
display: table;
margin: 0 auto;
}
.midden li{
float: none;
}
.midden ol {
margin-top: 0;
margin-bottom: 10px;
display: table;
margin: 0 auto;
}
.midden li{
float: none;
}
.jumbotron {
background: url("http://www.govisitcostarica.com/images/photos/full-hot-air-balloons-near-arenal.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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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>
您的某些标记已关闭,'midden' 不是一个词,您所要做的只是 'text-center' 行 并且它工作正常。祝你好运!
<div class="jumbotron">
<div class="container container-fluid">
<div class="row text-center">
<div class="col-md-12">
<ul class="list-unstyled list-inline">
<li><a href="#" role="button">Contact</a></li>
<li><a href="#" role="button">Work</a></li>
</ul>
</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>