Question

我的问题是关于HTML - 我需要在行的中心排列2个图像（在同一行中），但我还需要在每个图像的右侧写入文本;文本必须垂直对齐而不是图像。我该怎么做？

Answer 1

您可以执行以下操作：

<div class="container">
    <div class="img1">
        <img src="http://www.veryicon.com/icon/png/Nature/Nature/Red%20Flower.png" />
        <span>This is flower1</span>
    </div>
    <div class="img2">
        <img src="http://www.veryicon.com/icon/png/Nature/Nature/Red%20Flower.png" />
        <span>This is flower2</span>
    </div>
</div>

CSS ：

div.container {
     margin: auto;
      width: 700px;  
    text-align: center;
    position: relative;
}

div.img1 {
    position: absolute;
     left: 0px;
}

div.img2 {
    position: absolute;
     right: 0px;   
}

img {
    vertical-align: middle;
}

我为你制作了这个例子here on JSFiddle。

Answer 2

以旧方式，您可以使用border = 0，包含1行和4列的表。 table和td标签允许您对齐垂直和水平。这是实现您的要求的一种非常简单的方法，但它可能不是更好。

此外，您可以使用div对齐。

如何通过中心对齐绘制2个图像？

2 个答案: