### 实现DIV中
图片和
文字垂直水平
对齐的
CSS样式
在HTML和
CSS中，实现DIV容器内的
图片和
文字同时垂直水平
对齐可以通过多种方法完成。以下是一些常见的
解决方案及其代码示例。
#### 方法一：使用 `flexbox` 布局
`flexbox` 是一种强大的布局工具，能够轻松实现子元素的水平和垂直居中
对齐。通过设置父容器的 `display: flex` 属性，并结合 `align-items` 和 `justify-content` 属性，可以确保
图片和
文字在同一行内居中显示[^3]。
```
css
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
.container img, .container span {
display: inline-block; /* 确保子元素为行内块级元素 */
vertical-align: middle; /* 可选，进一步调整
对齐方式 */
}
```
```html
<div class="container">
<img src="example.jpg" alt="Example" style="width: 50px; height: 50px;">
<span>这是
文字内容</span>
</div>
```
#### 方法二：使用 `vertical-align` 和 `line-height`
对于简单的布局，可以利用 `vertical-align` 和 `line-height` 属性来实现
图片和
文字的
对齐。这种方法适用于单行文本和较小的
图片[^1]。
```
css
.container {
text-align: center; /* 水平居中 */
line-height: 200px; /* 行高等于容器高度 */
height: 200px;
border: 1px solid #ccc;
}
.container img, .container span {
vertical-align: middle; /* 垂直居中 */
}
```
```html
<div class="container">
<img src="example.jpg" alt="Example" style="width: 50px; height: 50px;">
<span>这是
文字内容</span>
</div>
```
#### 方法三：使用 `table-cell` 布局
将父容器设置为 `display: table-cell`，并结合 `vertical-align: middle` 属性，可以实现类似表格单元格的
对齐效果[^3]。
```
css
.container {
display: table-cell;
vertical-align: middle; /* 垂直居中 */
text-align: center; /* 水平居中 */
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
.container img, .container span {
display: inline-block; /* 确保子元素为行内块级元素 */
vertical-align: middle; /* 可选，进一步调整
对齐方式 */
}
```
```html
<div class="container">
<img src="example.jpg" alt="Example" style="width: 50px; height: 50px;">
<span>这是
文字内容</span>
</div>
```
#### 方法四：使用绝对定位和 `transform`
通过绝对定位和 `transform` 属性，可以精确地将
图片和
文字放置在容器的中心位置[^2]。
```
css
.container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
.container img, .container span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 动态计算宽高 */
}
```
```html
<div class="container">
<img src="example.jpg" alt="Example" style="width: 50px; height: 50px;">
<span>这是
文字内容</span>
</div>
```
---
#### 注意事项
- 如果需要兼容旧版浏览器（如IE8及以下），建议避免使用 `flexbox` 或 `transform`，而选择更传统的布局方法。
-
图片和
文字的
对齐可能受到其他样式的影响，例如外边距或内边距。因此，在实际应用中需注意清除不必要的间距[^4]。
---
CSS技巧：文字与图片完美对齐解决方案
本文介绍了如何使用CSS解决文字与图片对齐问题，通过实例和参考链接提供详细步骤，帮助开发者实现图文内容的整齐布局，提升网页视觉效果。
扫一扫
1119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
