Bootstrap初学者问题：如何实现按钮旁段落的垂直对齐

嘿，我完全懂你这种卡壳的感觉！其实这个问题的根源在于<p>标签自带的默认外边距，加上flex容器的默认对齐逻辑没适配好，咱们用几个Bootstrap自带的工具类就能轻松搞定，给你两种靠谱的方案：

方案一：单独给文本设置垂直居中 #

给<p>标签加上align-self-center让它在flex容器里垂直居中，同时用my-0去掉它默认的上下外边距（这是导致偏移的关键因素之一）：

<div class="d-inline-flex">
  <button class="btn" name="submit" onClick="sendContact();">Send</button>
  <p class="my-0 align-self-center">Problem in Sending Mail.</p>
</div>

方案二：给flex容器统一设置对齐 #

直接给外层的d-inline-flex容器加上align-items-center，这样容器里的所有子元素（按钮和文本）都会自动垂直居中，再给<p>加my-0去掉默认外边距就行：

<div class="d-inline-flex align-items-center">
  <button class="btn" name="submit" onClick="sendContact();">Send</button>
  <p class="my-0">Problem in Sending Mail.</p>
</div>

为啥原来的代码不行？ #

默认情况下，<p>标签有margin-top和margin-bottom，这会让它在flex容器里的位置被“顶”上去；同时flex容器默认的align-items值是stretch，但因为p的外边距干扰，看起来就和按钮不对齐了。去掉外边距+设置垂直对齐，问题就解决啦！

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