为什么我不能在Bootstrap列中居中放置"a“标记？
为什么我不能在Bootstrap列中居中放置"a“标记？
提问于 2016-11-29 17:17:59
当我为三个Bootstrap列中的按钮设置绝对width时，以及在我的<a href>样式表中设置position:absolute;时，我遇到了一个问题。
有没有人看到我错过了什么？这是我到目前为止所掌握的。
我目前所拥有的：
.outer-row {
width: 100%;
text-align: center;
letter-spacing: 1px;
position: relative;
height: 300px;
margin-top: 20px;
}
.dark-bar-option-col {
padding: 5px;
position: relative;
height: 100%;
align-content: center!important;
text-align: center!important;
}
.dark-bar-option-col a {
padding: 15px;
background-color: #3A83F3;
color: white;
bottom: 0;
font-size: 12px;
display: block;
text-align: center;
position: absolute;
margin: 20px;
width: 200px;
}
.dark-bar-option-col a:hover {
background-color: #0D5C9E;
text-decoration: none;
}
.dark-bar-option-col:nth-child(2) {
border-left: solid;
border-right: solid;
border-color: #E0DDDD;
border-width: 3px;
}<div>
<div class="row">
<div class="col-md-12 outer-row">
<div class="col-md-4 dark-bar-option-col">
<a href="#">Find out more</a>
</div>
<div class="col-md-4 dark-bar-option-col">
<a href="#">This is a button</a>
</div>
<div class="col-md-4 dark-bar-option-col">
<a href="#">This is a button</a>
</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2016-11-29 20:56:06
首先，当它们在col 4中时，您不能期望它们居中。其次，删除位置:绝对位置。你需要它们垂直居中，水平居中，还是两者兼而有之？
.outer-row {
width: 100%;
text-align: center;
letter-spacing: 1px;
position: relative;
height: 300px;
margin-top: 20px;
}
.dark-bar-option-col {
padding: 5px;
position: relative;
height: 100%;
align-content: center!important;
text-align: center!important;
}
.dark-bar-option-col a {
padding: 15px;
background-color: #3A83F3;
color: white;
bottom: 0;
font-size: 12px;
display: block;
text-align: center;
margin: 0 auto;
width: 200px;
}
.dark-bar-option-col a:hover {
background-color: #0D5C9E;
text-decoration: none;
}
.dark-bar-option-col:nth-child(2) {
border-left: solid;
border-right: solid;
border-color: #E0DDDD;
border-width: 3px;
}<div>
<div class="row">
<div class="col-md-12 outer-row">
<div class="dark-bar-option-col">
<a href="#">Find out more</a>
</div>
<div class="dark-bar-option-col">
<a href="#">This is a button</a>
</div>
<div class="dark-bar-option-col">
<a href="#">This is a button</a>
</div>
</div>
</div>
</div>
如果您需要它们同时水平和垂直居中，请使用以下命令：
CSS:
.outer-row {
width: 100%;
text-align: center;
letter-spacing: 1px;
position: relative;
height: 300px;
margin-top: 20px;
}
.dark-bar-option-col {
padding: 5px;
position: relative;
height: 100%;
align-content: center!important;
text-align: center!important;
}
.xcent{ position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}
.dark-bar-option-col a {
padding: 15px;
background-color: #3A83F3;
color: white;
bottom: 0;
font-size: 12px;
display: block;
text-align: center;
margin: 0 auto;
width: 200px;
}
.dark-bar-option-col a:hover {
background-color: #0D5C9E;
text-decoration: none;
}
.dark-bar-option-col:nth-child(2) {
border-left: solid;
border-right: solid;
border-color: #E0DDDD;
border-width: 3px;
}
HTML:
<div>
<div class="row">
<div class="col-md-12 outer-row">
<div class="dark-bar-option-col">
<div class="xcent">
<a href="#">Find out more</a>
</div>
</div>
<div class="dark-bar-option-col">
<div class="xcent">
<a href="#">This is a button</a>
</div>
</div>
<div class="dark-bar-option-col">
<div class="xcent">
<a href="#">This is a button</a>
</div>
</div>
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40861920
复制相关文章
相似问题
腾讯云开发者
