html - 将 div 与文本垂直对齐在同一行

Question

我有一个文本和一个 div 彼此相邻(其中写着“BitHumor”和“检查”符号)，但它们彼此不对齐(参见图片)

这是我的 HTML 和 CSS 代码:

<font face='HelveticaNeue-bold' color='#4671A5' font size='6' style='position:absolute;z-index:500;width:100%;top:120px;vertical-align:middle;'>
<center>" . $row["username"]. "&nbsp;<div class='" . $row["status"]. "'></div>   
    <style>
    .official {
    content: url('http://bithumor.co/1234567890.png');
    width: 28px;
    height: 28px;
      display: inline;
    z-index:999999;
    position: absolute;
    vertical-align:middle;
    }
    </style>

如何使文本(“BitHumor”)和 div(图像 - 带复选标记)垂直对齐？

Answer 1

这里有两个选项:

1. 删除绝对定位。通过从复选标记类 (.official) 中删除 position:absolute，您可以使用vertical-align 。

2. 使用margin进行对齐。将其添加到复选标记类中:.official { margin-top: 5px; }