引导对齐图像 - CSS

在Web开发中，我们常常需要在页面上对齐图像。CSS提供了一种方便的方式来实现这一点 - 使用vertical-align属性和display属性。

vertical-align属性

vertical-align属性用于控制元素的垂直对齐方式。在对齐图像时，我们可以将其应用于图像元素。

以下是可用的值：

• baseline（默认值） - 元素放置在父元素的基线上
• top - 元素放置在父元素的顶部
• middle - 元素放置在父元素的中央
• bottom - 元素放置在父元素的底部

在本例中，我们将使用vertical-align: middle来将图像垂直居中。

display属性

display属性用于控制元素的显示方式。对于图像，我们将使用display: inline-block，这将允许我们将元素置于一行内，并同时保持其块级特性，允许我们为其设置宽度和高度。

以下是可用的值：

• block（默认值） - 元素将始终生成一个块级盒子
• inline - 元素将生成一个内联盒子
• inline-block - 元素将生成一个内联块级盒子，它将保留其块级特性

示例

img {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
}

<div>
    <img src="image.png" alt="Image">
    <p>这是一段文本</p>
</div>

在上面的示例中，我们设置了图像元素的display属性为inline-block，并将其vertical-align属性设置为middle，这使得图像垂直居中对齐。

同时，我们还将图像的宽度和高度设置为100px，以确保它们具有相同的尺寸。

最后，我们将图像包含在一个div元素中，并在其下方添加一个段落元素，以演示图像和文本之间的对齐。