图片与文字完美融合：揭秘CSS对齐技巧与实战案例

一、CSS对齐技巧概述

CSS对齐技巧主要分为以下几类：

1. 水平对齐：包括左对齐、右对齐、居中对齐等。
2. 垂直对齐：包括顶部对齐、底部对齐、基线对齐、中间对齐等。
3. 混合对齐：结合水平和垂直对齐实现复杂布局。

二、实战案例一：图片左对齐，文字环绕

HTML结构

<div class="container">
    <img src="example.jpg" alt="Example Image" class="image-left-align">
    <p>这是一段描述文字，用于展示图片左对齐和文字环绕的效果。</p>
</div>

CSS样式

.container {
    width: 600px;
    border: 1px solid #ccc;
    margin: 20px auto;
    padding: 10px;
}

.image-left-align {
    float: left;
    margin-right: 20px;
}

p {
    text-align: justify;
}

三、实战案例二：图片居中，文字底部对齐

HTML结构

<div class="container">
    <img src="example.jpg" alt="Example Image" class="image-center-align">
    <p>这是一段描述文字，用于展示图片居中和文字底部对齐的效果。</p>
</div>

CSS样式

.container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 600px;
    border: 1px solid #ccc;
    margin: 20px auto;
    padding: 10px;
}

.image-center-align {
    max-width: 100%;
    height: auto;
}

四、实战案例三：图片与文字垂直居中对齐

HTML结构

<div class="container">
    <img src="example.jpg" alt="Example Image" class="image-center-align">
    <p>这是一段描述文字，用于展示图片与文字垂直居中对齐的效果。</p>
</div>

CSS样式

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 600px;
    border: 1px solid #ccc;
    margin: 20px auto;
    padding: 10px;
}

.image-center-align {
    max-width: 100%;
    height: auto;
}

五、总结