如何使含两个社交媒体图标的div与其他内容水平对齐？

问题根源 #

inline-block元素默认采用基线对齐，.social-media容器里的图片属于inline元素，它的基线会和其他元素的基线对齐，导致视觉上社交图标块位置偏高，单纯设置line-height、padding或margin为0无法改变基线对齐的规则。

解决方案1：调整垂直对齐属性 #

给三个目标元素添加vertical-align: middle，强制它们垂直居中对齐：

.byline, .social-media, .share {
    display: inline-block;
    background-color: green;
    vertical-align: middle; /* 新增垂直对齐规则 */
}

可选优化：给社交图标设置display: block，消除inline元素默认的间距：

.facebook, .twitter {
    height: 25px;
    display: block;
}

解决方案2：使用Flex布局（更推荐） #

给父容器.container设置Flex布局，直接实现元素垂直居中，无需处理inline-block的对齐兼容问题：

.container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 可选：设置元素间的间距 */
}

.byline, .social-media, .share {
    background-color: green;
    /* 移除display: inline-block，Flex子元素默认适配布局 */
}

.share {
    border: solid black 2px;
    padding: 2px;
}

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