HTML中如何让行内<p>元素在高度更大的行中垂直居中对齐

解决方案 #

你遇到的对齐问题是因为inline元素默认以文本基线对齐，文字默认会和图片的底部对齐，只要添加对应对齐属性就可以解决。

方案1：最小改动（不修改原有布局结构） #

直接给两个行内元素添加垂直居中对齐属性，修改后的CSS如下：

.creator-name {
    margin: 0;
    display: inline;
    vertical-align: middle; /* 新增对齐属性 */
    margin-left: 8px; /* 可选，调整头像和用户名的间距 */
}

.face {
    height: 32px;
    display: inline;
    border-radius: 16px;
    vertical-align: middle; /* 新增对齐属性 */
}

.creator {
    float: right;
    border: 4px solid #ddd;
    padding: 16px;
    border-radius: 0 16px 0 16px;
}

方案2：Flex布局（更易维护，后续调整更灵活） #

给父容器开启flex布局自动处理对齐，不需要再单独给子元素设置inline属性：

.creator-name {
    margin: 0 0 0 8px; /* 左边预留头像和用户名的间距 */
}

.face {
    height: 32px;
    border-radius: 16px;
}

.creator {
    float: right;
    border: 4px solid #ddd;
    padding: 16px;
    border-radius: 0 16px 0 16px;
    display: flex; /* 新增flex布局 */
    align-items: center; /* 新增属性，子元素垂直居中 */
}

两种方案都可以实现用户名和头像的垂直居中对齐效果。

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