Question

所以我有这个代码

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

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

Answer 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>

Answer 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?中的说明进行操作。

Answer 3

我将其分成3个相等的列以使其更容易。然后，您可以使用text-center：

<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>

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

3 个答案: