图片与文字对齐 css

基础概念

图片与文字对齐是网页设计中的一个基本需求，它涉及到CSS（层叠样式表）的使用，以实现视觉上的协调和美观。CSS提供了多种属性来控制元素的对齐方式，包括水平对齐和垂直对齐。

类型

水平对齐：
- text-align：用于设置文本的水平对齐方式（左对齐、右对齐、居中、两端对齐）。
- float：用于将图片浮动到指定位置，常与文本结合使用。
- display: inline-block：将元素设置为内联块级元素，可以精确控制宽度和高度，并且可以与文本对齐。

垂直对齐：
- vertical-align：用于设置元素的垂直对齐方式（顶部对齐、底部对齐、居中）。
- flexbox：使用CSS Flexbox布局可以轻松实现复杂的对齐需求。
- grid：CSS Grid布局提供了强大的二维布局能力，可以精确控制元素的对齐。

应用场景

新闻网站：在新闻文章中，图片通常与标题或摘要对齐，以提高可读性。
电商网站：产品图片与描述文字的对齐可以提升用户的购物体验。
社交媒体：用户头像与用户名的对齐有助于创建整洁的社交界面。

示例代码

以下是一个简单的示例，展示如何使用CSS实现图片与文字的水平对齐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片与文字对齐示例</title>
    <style>
        .container {
            text-align: center; /* 水平居中对齐 */
        }
        img {
            display: inline-block; /* 内联块级元素 */
            vertical-align: middle; /* 垂直居中对齐 */
            margin-right: 10px; /* 图片与文字之间的间距 */
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="example.jpg" alt="示例图片" width="100" height="100">
        <p>这是一段示例文字。</p>
    </div>
</body>
</html>