Question

Hello thank you for looking at my question,

I'm trying so hard to center this link on a modal in bootstrap. I'm not using the grid system or rows. There's a BS carousel in the modal and I'm able to center the elements in that with margin:0 auto;

Heres a visualisation of where the links is, it stubbornly stays on the left of the modal.

Click Here to see image

置于中心位置

链接应该在旋转木马指示器下方。

HTML片段：

.
.
.
<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实际居中。

Answer 1

2个选项：

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

你可以尝试here

Answer 2

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

Text-align: center;

Answer 3

您还可以尝试制作100％的标记并对齐中心

.center-link{

   text-align:center;

   width:100%;

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

如何将此<a> tag on this modal in Bootstrap?

3 个答案: