如何使用CSS和React.js实现图片与文字横向并排对齐

修正方案 #

原有布局依赖inline-block和百分比负边距实现对齐，容易出现基线错位、不同屏幕尺寸下布局偏移的问题，改用Flex布局可以稳定实现图片与文字并排垂直居中的效果：

修正后的CSS代码

.container {
    display: flex;
    align-items: center;
    margin-left: 5%;
    margin-top: 12%;
}

img {
    height: 110px;
    width: 110px;
}

p {
    text-align: left;
    font-family: "Montserrat", sans-serif;
    font-weight: 100;
    line-height: 1.5;
    margin: 0 0 0 24px;
}

修正后的React代码

<div className={classes.empty}></div>
<div className="container">
  <img
    className={classes.img}
    src={ProfilePic}
    alt="Profile"
  />
  <p>
    So May See Macy <br />
    计算机科学专业 <br />
    当前年级：大二 <br />
    GPA：3.6
  </p>
</div>
</div>

调整说明

• 容器开启Flex布局，通过align-items: center直接实现图片和多行文字的垂直居中对齐，无需手动计算负边距
• 移除p标签原有的不合理百分比边距，仅保留24px左侧间距实现和图片的分隔，间距数值可根据需求自行调整
• 移除img标签上冗余的行内样式，统一在CSS中控制布局属性，避免样式冲突

内容的提问来源于stack exchange，提问作者So May See Macy