文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >为什么我不能在Bootstrap列中居中放置"a“标记？

问为什么我不能在Bootstrap列中居中放置"a“标记？
EN

Stack Overflow用户
提问于 2016-11-29 17:17:59
回答 5查看 335关注 0票数 0

当我为三个Bootstrap列中的按钮设置绝对width时，以及在我的<a href>样式表中设置position:absolute;时，我遇到了一个问题。

有没有人看到我错过了什么？这是我到目前为止所掌握的。

我目前所拥有的：

​

代码语言：javascript
运行
复制
.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;
}
代码语言：javascript
运行
复制
<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>

​

html
css
twitter-bootstrap
EN

回答 5

Stack Overflow用户

发布于 2016-11-29 20:56:06

首先，当它们在col 4中时，您不能期望它们居中。其次，删除位置:绝对位置。你需要它们垂直居中，水平居中，还是两者兼而有之？

​

代码语言：javascript
运行
复制
.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;
}
代码语言：javascript
运行
复制
<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>

​

如果您需要它们同时水平和垂直居中，请使用以下命令：

代码语言：javascript
运行
复制
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>
票数 1
EN

Stack Overflow用户

发布于 2016-11-29 17:24:47

因为你的锚上有一个绝对的位置。只需添加一个左侧位置( 50%)，并将左侧边距设置为锚点大小的一半(-100px)

执行以下操作：

代码语言：javascript
运行
复制
.dark-bar-option-col a {
    background-color: #3a83f3;
    bottom: 0;
    color: white;
    display: block;
    font-size: 12px;
    margin: 20px 20px 20px -100px;
    padding: 15px;
    position: absolute;
    text-align: center;
    width: 200px;
    left: 50%;
    margin: 20px 20px 20px -100px;
}
票数 0
EN

Stack Overflow用户

发布于 2016-11-29 17:25:21

因为容器没有固定的宽度，而且你的锚点是绝对的，你不能像这样居中。你可以在你的锚元素上使用CSS Transform。

代码语言：javascript
运行
复制
.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;
transform: translateX(-50%);
margin-left: 50%;
}

​

代码语言：javascript
运行
复制
.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;
margin: 20px;
width:200px;
/*-- Added --*/
transform: translateX(-50%);
margin-left: 50%;
}
.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;
}
代码语言：javascript
运行
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40861920

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档