如何使用 css 和 react.js 将图像和文本并排对齐答案

【问题标题】：How to align a image and a text together side by side, using css and react.js如何使用 css 和 react.js 将图像和文本并排对齐
【发布时间】：2021-11-04 11:27:32
【问题描述】：

This is what I wanted to do

This is what I have right now

这是我现在拥有的代码，我尝试使用内联和我能想到的所有 css 语法，但它仍然不能正常工作。我尝试在反应中填充边距。我还使用一个盒子来装箱所有组件以及包括图像和文本在内的所有内容。

p {
    margin-left: 40%;
    margin-top: -50%;
    text-align: left;
    font-family: "Montserrat", sans-serif;
    font-weight: 100;
    line-height: 1.5;
    display: inline-block;
}

img {
    height: 110px;
    width: 110px;
    margin-left: 5%;
    display: inline-block;
}

.container {
    display: inline-block;
}

这里是 react.js 文件中的一些代码

<div className={classes.empty}></div>
        <div className="container">
          <img
            className={classes.img}
            src={ProfilePic}
            alt="Profile"
            style={{ marginTop: "12%", display: "inline-block;" }}
          ></img>
          <p>
            So May See Macy <br />
            Computer Science Major <br />
            Current Standing: Sophomore <br />
            GPA: 3.6
          </p>
    </div>
</div>

【问题讨论】：

我建议你用 2 个
分割容器。并在 css 中使用 align-items 属性。

标签： css reactjs

【解决方案1】：

尝试：

.container {
  display: flex;
  align-items: center;
}

并从 p 和 img 元素中删除 inline-block 属性。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

尝试使用flexbox

.container {
    display: flex;
    justiry-content: start;
    align-itemt: center;
}

.container img, .container p {
    flex-grow: 0;
}

.container img {
    width: 110px;
    height: 110px;
    max-width: 100%;
    max-height: 100%;
}

.container p {
    margin-left: 40%;
    margin-top: -50%;
    text-align: left;
    font-family: "Montserrat", sans-serif;
    font-weight: 100;
    line-height: 1.5;
}

Read Flexbox docs

【讨论】：

【解决方案3】：

.container {
  display: flex;
  justify-content: start;
  align-items: center; 
}

【讨论】：