如何解决Bootstrap按钮与Google Hangout按钮垂直对齐问题？

我之前也碰到过类似的对齐坑，Google Hangout按钮自带的默认样式经常会和Bootstrap的布局规则冲突，给你几个亲测有效的解决思路：

方法一：用Bootstrap Flex工具类快速搞定 #

Bootstrap本身提供了完善的flex布局工具类，直接把两个按钮放进flex容器里，一键实现垂直居中：

<div class="d-flex align-items-center">
  <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
    <?=_("Create")?> <i class="fab fa-google"></i>
  </button>
  <!-- 给Google按钮加个左边距避免挤在一起 -->
  <div class="ml-2">
    <g:hangout-button></g:hangout-button>
  </div>
</div>

d-flex会把容器转为flex布局，align-items-center让所有子元素垂直居中，ml-2是Bootstrap的间距工具类，用来分隔两个按钮，比自定义margin更符合框架规范。

方法二：覆盖Google Hangout按钮的默认样式 #

如果不想改布局结构，可以直接调整Google按钮的垂直对齐属性，写一段自定义CSS：

/* 针对Google Hangout按钮的容器 */
.g-hangout-button {
  vertical-align: middle;
  margin-top: 0 !important; /* 强制覆盖按钮自带的默认margin */
}

要是你的Hangout按钮是iframe形式，就直接给iframe加样式：

.g-hangout-button iframe {
  vertical-align: middle;
}

vertical-align: middle能让元素和旁边的Bootstrap按钮基线对齐，!important是为了确保优先级高于Google自带的样式。

方法三：用Bootstrap对齐工具类统一设置 #

给两个元素都加上Bootstrap的align-middle类，让它们统一垂直对齐：

<button type="button" class="btn btn-primary btn-sm align-middle" data-toggle="modal" data-target="#myModal">
  <?=_("Create")?> <i class="fab fa-google"></i>
</button>
<span class="align-middle">
  <g:hangout-button></g:hangout-button>
</span>

这个类本质就是设置vertical-align: middle，用框架自带的类比自定义CSS更简洁。

另外提一句，你之前用span加margin-top没用，大概率是因为Google按钮属于inline/inline-block元素，这类元素的垂直对齐主要靠vertical-align属性，margin-top对它的影响非常有限，所以才没效果~

内容的提问来源于stack exchange，提问作者Cesar Bielich