使用图像和文本内联制作div

Question

我需要一些帮助。我一直在寻找，我没有发现任何有效的东西。这就是我提出这个问题的原因。我试图让一个带有文本和图像的div与另一个div内联，如下所示：

下面的图片和文字都在一个div中。这是怎么做到的？

Answer 1

为div设置display: inline-block或float: left样式。我的偏好是display: inline-block，因为你不需要在之后清除浮动。

Answer 2

您可以尝试这样做，其中黑框是外部<div>，内部两个框是嵌套的<div>，具有以下CSS属性：

.nesteddiv{
    width: 50%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.nesteddiv img{
    vertical-align: middle;
}

Answer 3

我建议将<figure>和<figcaption>标记与display: inline-block结合用于此目的：

#container figure {
    text-align: center;
    display: inline-block;
}

<div id="container">
    <figure>
        <img src="http://lorempixel.com/100/100/business/1" />
        <figcaption>Owner</figcaption>
    </figure>
    <figure>
        <img src="http://lorempixel.com/100/100/business/2" />
        <figcaption>Admin</figcaption>
    </figure>
</div>