HTML 图片文本对齐方式
在网页设计中，图片和文本的对齐方式是非常重要的，它直接影响到页面的美观度和用户体验。HTML 提供了多种方法来实现图片和文本的对齐，下面我们来一起了解一下吧。
一、水平对齐
. 左对齐
当我们想让文本和图片左对齐时，可以使用以下代码：
```html
<div style="text-align: left;">
<img src="example.jpg" alt="示例图片">
<p>这是一段左对齐的文本。</p>
</div>
```
. 右对齐
如果想让文本和图片右对齐，可以使用以下代码：
```html
<div style="text-align: right;">
<img src="example.jpg" alt="示例图片">
<p>这是一段右对齐的文本。</p>
</div>
```
. 居中对齐
要实现文本和图片居中对齐，可以使用以下代码：
```html
<div style="text-align: center;">
<img src="example.jpg" alt="示例图片">
<p>这是一段居中对齐的文本。</p>
</div>
```
二、垂直对齐
在网页设计中，垂直对齐往往比较复杂，因为不同的图片和文本可能具有不同的高度。不过我们可以通过以下方法来实现垂直对齐：
. 使用表格布局
```html
<table>
<tr>
<td style="vertical-align: top;">
<img src="example.jpg" alt="示例图片">
</td>
<td style="vertical-align: top;">
<p>这是一段顶部对齐的文本。</p>
</td>
</tr>
</table>
```
. 使用 Flexbox 布局
```html
<div style="display: flex; align-items: center;">
<img src="example.jpg" alt="示例图片">
<p>这是一段居中对齐的文本。</p>
</div>
```
三、响应式对齐
在移动设备上，我们可能需要不同的对齐方式来适应不同的屏幕尺寸。这时可以使用媒体查询来实现响应式对齐：
```html
<style>
@media (max-width: px) {
.container {
text-align: center;
}
}
</style>
<div class="container">
<img src="example.jpg" alt="示例图片">
<p>这是一段在小屏幕上居中对齐的文本。</p>
</div>
```
总结
通过以上介绍，我们可以看到在 HTML 中实现图片和文本的对齐方式有多种方法，我们可以根据实际需求选择合适的方式来实现页面布局。希望以上内容能帮助到大家，谢谢阅读！