html - 如何保持 和 在 之外对齐

Question

我有以下 CSS 代码:

.blackbox {
    background: black;
    width: 17px;
    height: 18px;
    line-height: 18px;
    text-align: center;
}

在我的 HTML 文件中，我调用了以下内容。

<div class="blackbox">
  10
</div>
<img src="icon-local.png">
<img src="icon-national.png">

如何让通过 CSS 调用渲染的框和通过 img 标签调用的图像保持在同一水平线上？

目标是创建看起来与此类似的东西，但在其他图标前面有 CSS 框。示例图像:Example Image

提前致谢!

肯

Answer 1

您可以使用display:inline-block 或display:table。

<div class="parent">
    <div class="blackbox">10</div>
    <img src="icon-local.png" />
    <img src="icon-national.png" />
</div>

还有CSS

.parent div, .parent img {
    display:inline-block;
    *display:inline; /* IE7 hack */
    zoom:1 /* IE7 */
    vertical-align:middle;
}