如何使用引导程序对齐左侧的按钮和同一行中心的徽标？答案

【问题标题】：How to align button on the left, and logo in the center on the same row using bootstrap?如何使用引导程序对齐左侧的按钮和同一行中心的徽标？
【发布时间】：2019-03-04 10:07:36
【问题描述】：

所以我有这个代码

<div class="row">
    <a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
    <img class="center-block" src="logo.png" />
</div>

徽标图像似乎偏离中心，因为它仅在按钮后进行边距测量。如何确保按钮与中心对齐？

【问题讨论】：

How to vertically align an image inside a div?的可能重复

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以将按钮和图像放在两个不同的列中就像

<div class="row">
  <div class="col-md-4">
    //your button code
  </div>
  <div class="col-md-4">
    //your image code
  </div>
  <div class="col-md-4">
    //some other stuff
  </div>
</div>

【讨论】：

【解决方案2】：

你可以尝试在中间休息一下：

<div class="row">
    <a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
    <br/>
    <img class="center-block" src="logo.png" />
</div>

确保您的图片位于按钮下方后，如果您需要帮助对齐 div 内的内容，您应该能够按照 How to vertically align an image inside a div? 中的说明进行操作。

【讨论】：

【解决方案3】：

我会将它分成 3 个相等的列以使其更容易。然后你可以使用文本中心：

<div class="row">
    <div class="col-sm-4">
        <a class="btn btn-primary">Back to Main Menu</a>  
    </div>  
    <div class="col-sm-4 text-center">
        <img src="logo.png" />
    </div>
    <div class="col-sm-4"></div>
</div>

【讨论】：