This is what I wanted to do

This is what I have right now

This is the code that I have right now, I try using inline and all the css syntax I can think of, but it is still not working quite right. I try the margin padding in react. I am also using a box to box up all the components and everything inculding the image and the text.

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;
}

Here are some of the code in the react.js file

<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>

CodePudding user response：

try:

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

and remove the inline-block attributes from the p and img elements.

CodePudding user response：

Try to use 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

CodePudding user response：

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