如何在 Bootstrap 按钮中将文本与大字体很棒的图标垂直对齐？

文本与大 Font Awesome 图标的垂直对齐

使用包含 Font Awesome 图标和文本的 Bootstrap 按钮时，这可能具有挑战性使文本垂直居中。默认情况下，文本与图标的底部边缘对齐。

要解决此问题，请重点调整图标的垂直对齐方式而不是文本。具体方法如下：

1. 使用内联样式垂直对齐：

   <div>
     <span class="icon icon-2x icon-camera"><li>
   <p><strong>使用 CSS 垂直对齐类：</strong></p>
   <pre class="brush:php;toolbar:false"><div class="my-fancy-container">
     <span class="my-icon icon-file-text"></span>
     <span class="my-text">Hello World</span>
   </div>

   .my-icon {
     vertical-align: middle;
     font-size: 40px;
   }

2. 避免使用 Icon-2x：

   使用 icon-2x 调整图标大小可能会导致在对齐问题中。相反，明确设置图标的字体大小。

通过应用这些技术，您可以将文本与大的 Font Awesome 图标垂直对齐，确保更美观和平衡的外观。