CSS：在具有自定义高度的div中居中两个元素答案

【问题标题】：CSS: Centering two elements within a div with custom heightsCSS：在具有自定义高度的div中居中两个元素
【发布时间】：2015-10-29 19:14:45
【问题描述】：

我有一个页面标题列表，我想在它们旁边显示一个很棒的字体符号。

<div>
    <ul class="form-navigation">
        <li ng-repeat="..."
            ng-click="...">
            <div>
                <a href="">{{QuestionGroup.Title}}</a>
                <span class="pull-right fa fa-exclamation-triangle" style="color: red;"></span>
            </div>
        </li>
    </ul>
</div>

我希望文本垂直居中，FA 符号水平和垂直居中。我尝试了一系列不同的方法，将它们放在不同的 div 中并应用各种样式，但我什么都做不了。

符号是最大的问题，因为我可以通过在顶部/底部添加填充来将其居中，但由于我的页面标题具有随机长度，它们可能占用超过 1 行，从而导致 div 的大小不同。

【问题讨论】：

Line-height 应该可以解决问题。你能做一个演示吗？

标签： css alignment

【解决方案1】：

使用表格正确对齐它们

<div>
    <tr>
        <td>
            <a href="">This is lol</a>
         <td>
         <td>
             <span class="fa fa-exclamation-triangle" style="color: red;"></span>
         <td>
     </tr>
</div>

【讨论】：

只是...不。可能是 CSS 表格，但不是用于布局的表格。