Question

我在这里问这个有点愚蠢，但我似乎无法使用bootstraps align-middle类

让这个文本与按钮对齐

<span class="align-middle">
    <button class="btn btn-primary btn-sm align-middle mt-3">
        <span class="fa fa-plus nr-2"></span>
    </button>
    <small>Add new website</small>
</span>

我也试过......

<span class="align-middle">
    <button class="btn btn-primary btn-sm align-middle mt-3">
        <span class="fa fa-plus nr-2"></span>
    </button>
    <small class="align-middle">Add new website</small>
</span>

Answer 1

要将文本垂直居中对齐到按钮，您可以执行以下操作：

将d-flex类添加到父元素（本例中为col，但也可以是容器中的另一个div）
将align-self-center类添加到文本元素中。

更简单的方法是将上边距（mt-3）移动到父元素。

以下是两者的比较（点击＆＃34;运行代码段＆＃34;按钮如下）：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
    <div class="row">
        <div class="col d-flex">
            <button class="btn btn-primary btn-sm fa fa-plus mr-2 mt-3" style="height: 80px"></button>
            <small class="align-self-center">Add new website</small>
        </div>
    </div>
</div>

<div class="container">
    <div class="row mt-3">
        <div class="col">
            <button class="btn btn-primary btn-sm fa fa-plus mr-2" style="height: 80px"></button>
            <small>Add new website</small>
        </div>
    </div>
</div>

＆＃13;

注意：我添加了style="height: 80px"以使对齐更清晰。

Answer 2

只需删除上边距mt-3 ...它就会抛弃垂直边距。

<span class="align-middle">
        <button class="btn btn-primary btn-sm">
            <span class="fa fa-plus"></span>
        </button>
        <small>Add new website</small>
</span>

https://www.codeply.com/go/3lA1M96Na1

Bootstrap对齐 - 中产阶级

2 个答案: