如何在 Bootstrap 中将此 <a> 标记居中在此模式上？答案

【问题标题】：How do I center this <a> tag on this modal in Bootstrap?如何在 Bootstrap 中将此 <a> 标记居中在此模式上？
【发布时间】：2016-12-05 22:25:51
【问题描述】：

您好，感谢您查看我的问题，

我正在努力将此链接集中在引导程序中的模式上。我没有使用网格系统或行。模态中有一个 BS 轮播，我可以使用 margin:0 auto; 将元素居中。

这是链接位置的可视化，它固执地停留在模态框的左侧。

Click Here to see image

链接应该在轮播指示器的正下方。

HTML sn-p:

.
.
.
<div>
    <ol>
        <li> data-slide-to="1"></li>
        <li data-target="#home-price-guide-carousel" data-slide-to="2"></li>
    </ol>

</div>

<a class="btn-center" href="#">Continue</a>

<div class="modal-footer">

</div>
.
.
.

相关CSS：

.btn - center {
    color: #95d63b;
    margin:0 auto;
    float:none;
}

基本上，我如何让btn-center 真正居中。

【问题讨论】：

标签： html css twitter-bootstrap layout bootstrap-modal

【解决方案1】：

2 个选项：

text-align:center;
.btn-center{ color:#95d63b; position:absolute; transform:translate(-50%,-50%); left:50%; }

你可以试试here

【讨论】：

【解决方案2】：

修改上面的css并添加以下内容

Text-align: center;

【讨论】：

【解决方案3】：

你也可以尝试做一个100%的标签并居中对齐

.center-link{

   text-align:center;

   width:100%;

   display:block; /* Displays an element as a block element (like <p>) */
}

【讨论】：