html - 带有自定义图像的 Bootstrap 按钮中的文本和图标左对齐

Question

我在使用 bootstrap 框架时无法水平对齐按钮。我尝试了很多东西，也阅读了很多，但我的解决方案不起作用。有人能帮我吗？提前谢谢你。

想法是左对齐按钮的文本，附件图像是以下 html 的输出:

<div class="btn-group btn-group-justified">

    <a href="#" class="btn btn-default" id="bCheckIn" value="action01">
        <img src="http://localhost/daycare/assets/img/activities/CheckIn.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Check in</span>
    </a>

    <a href="#" class="btn btn-default" id="bactivities" value="action02">
        <img src="http://localhost/daycare/assets/img/activities/Activities.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Activities</span>
    </a>

    <a href="#" class="btn btn-default" id="bBottle" value="action03">
        <img src="http://localhost/daycare/assets/img/activities/Bottle.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Bottle</span>
    </a>

    <a href="#" class="btn btn-default" id="bComputer" value="action04">
        <img src="http://localhost/daycare/assets/img/activities/ComputerTime.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Computer</span>
    </a>

    <a href="#" class="btn btn-default" id="bDiaper" value="action05">
        <img src="http://localhost/daycare/assets/img/activities/Diaper.png" width="35" height="35" align="left" />
        <span class="hidden-xs hidden-sm">Diaper</span>
    </a>

</div>

Answer 1

text-align: left css 属性可以影响 inline 和 inline-block 元素，您可以将其用于左对齐。

编辑:

如果您在站点的许多地方使用 .btn-group 并且您希望所有这些都左对齐，那么应用通用样式来影响所有出现的 .btn-group 如下所示:

.btn-group .btn-default {
    text-align: left;
}

但是，如果您在许多地方有多个 .btn-group，但您只希望其中一个left-align，那么最好在 上添加额外的自定义类。 btn-group 和样式如下所示。

<div class="btn-group btn-group-justified custom-btn-group">
     // content goes here...
</div>

样式如下:

.custom-btn-group .btn-default {
    // styles goes here...
}

注意:以全页模式查看演示。

.btn-group .btn-default {
  text-align: left;
}

.btn-group .btn-default span,
.btn-group .btn-default img {
  vertical-align: middle;
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-default" id="bCheckIn" value="action01">
        <img src="http://localhost/daycare/assets/img/activities/CheckIn.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Check in</span>
    </a>

    <a href="#" class="btn btn-default" id="bactivities" value="action02" >
        <img src="http://localhost/daycare/assets/img/activities/Activities.png" width="35" height="35"/>
       <span class="hidden-xs hidden-sm">Activities</span>
    </a>

    <a href="#" class="btn btn-default" id="bBottle" value="action03">
        <img src="http://localhost/daycare/assets/img/activities/Bottle.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Bottle</span>
    </a>

    <a href="#" class="btn btn-default" id="bComputer" value="action04">
        <img src="http://localhost/daycare/assets/img/activities/ComputerTime.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Computer</span>
    </a>

    <a href="#" class="btn btn-default" id="bDiaper" value="action05">
        <img src="http://localhost/daycare/assets/img/activities/Diaper.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Diaper</span>
    </a>
</div>