如何水平对齐父div内的子div？CSS问题解析与修复方案

完整实现代码 #

HTML（无需修改） #

<div class="a10-outter-box">
    <div class="a10-inner-box-1">
        <img src="avtar.png" alt="头像">
    </div>
    <div class="a10-inner-box-2">
        <p>hemant rawat</p>
        <p>offline</p>
        <p>last 1 hr ago</p>
    </div>
</div>

修改后的CSS #

.a10-outter-box {
    border: 1px solid black;
    /* 改用Flex布局，直接实现子元素垂直居中对齐 */
    display: flex;
    align-items: center;
    padding: 5px;
}

.a10-inner-box-2 {
    border: 1px solid black;
    /* 可选：给右侧盒子加左边距，拉开和图片的距离 */
    margin-left: 10px;
}

.a10-inner-box-2 p {
    border: 1px solid black;
    /* 可选：去掉p标签默认的上下外边距，避免多余间距 */
    margin: 4px 0;
}

.a10-inner-box-1 img {
    border: 1px solid black;
    height: auto;
    width: 80px;
    border-radius: 60px;
    /* 解决图片留白问题 */
    display: block;
}

.a10-inner-box-1 {
    border: 1px solid black; /* 可选：给左侧盒子加边框，方便查看 */
}

关键问题解析 #

1. 为什么你的vertical-align:middle不生效？ #

vertical-align属性仅对行内元素、行内块元素（inline-block）、表格单元格生效，对块级元素（display:block）完全无效。你之前给外层的a10-outter-box（设置为display:block）添加vertical-align:middle，这完全起不到作用。

另外，你给图片加了vertical-align:middle，但图片的父容器a10-inner-box-1是inline-block，右侧的a10-inner-box-2也是inline-block，两个inline-block元素默认采用基线对齐，而非垂直居中对齐。你没给这两个子容器设置vertical-align:middle，所以它们自然无法对齐。

2. 图片上方出现留白的解决办法 #

图片默认是行内替换元素，会与文本基线对齐，父元素的行高、字体大小会导致图片周围出现留白（你遇到的上方留白大概率是父容器inline-block的默认行高导致的）。有两种简单解决方式：

• 给图片设置display:block：将图片转为块级元素，脱离行内流，直接消除行高带来的留白。
• 给图片的父容器a10-inner-box-1设置font-size:0：消除父容器字体大小对行内元素的影响，也能去掉留白。

3. 为什么推荐用Flex布局实现对齐？ #

Flex布局是现代CSS实现元素对齐的首选方案，代码简洁，无需处理inline-block的各种兼容性问题（比如基线对齐、空格间隙）。display:flex让外层容器变为弹性容器，align-items:center直接让所有子元素在垂直方向居中对齐，水平方向默认横向排列，完美匹配你的需求。

内容的提问来源于stack exchange，提问作者Hemant Rawat