css图片下对齐

CSS 图片下对齐基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。在CSS中，图片下对齐是指将图片与其周围的文本或其他元素在垂直方向上对齐。

类型

垂直对齐：包括顶部对齐、底部对齐和居中对齐。
水平对齐：包括左对齐、右对齐和居中对齐。

应用场景

网页布局：在新闻网站、博客、电子商务网站等中，图片和文本的对齐方式对用户体验至关重要。
移动应用：在移动应用中，图片和文本的对齐方式同样重要，以确保内容在不同屏幕尺寸上都能良好显示。

常见问题及解决方法

问题：图片底部与文本顶部不对齐

原因：通常是由于行高（line-height）和图片高度不匹配导致的。

解决方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Alignment</title>
    <style>
        .container {
            line-height: 24px; /* 设置行高 */
        }
        img {
            vertical-align: middle; /* 垂直居中对齐 */
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="example.jpg" alt="Example Image" width="100" height="100">
        This is some text below the image.
    </div>
</body>
</html>

参考链接：