Need to put the image and text on same line-CodePudding

This is how it's looking

i need to make the icon and the text on the same line and close to each other, i tried usingdisplay: inline-block; but it didn't work, here's my code.

HTML:

<div className="Comment_Icon">
            <img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img>
            <div className="Comments">5 Class Comments</div>
    </div>

CSS:

.Student_Icon {
      height: 1vw;
      width: 1vw;
    
      display: inline-block;
    }
    
    .IconText {
          padding-top: 0.8vw;
          font-size: 1.5vw;
        }
    
    .Comments {
        font-size: 2.5vw;
        display: inline-block;
      }

CodePudding user response：

Use flex in this case as shown below

.IconText {
  padding-top: 0.8vw;
  font-size: 1.5vw;
}

.Comments {
  font-size: 2.5vw;
  display: inline-block;
}

.Comment_Icon {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.Student_Icon {
  margin-right: 3px;
}

<div class="Comment_Icon">
  <img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img>
  <div class="Comments">5 Class Comments</div>
</div>

CodePudding user response：

.Student_Icon {
      float: left;
      padding-right: 10px;
    }
    
    .IconText {
          padding-top: 0.8vw;
          font-size: 1.5vw;
        }
    
    .Comments {
        font-size: 2.5vw;
        display: inline-block;
      }

<div className="Comment_Icon">
    <img src=https://via.placeholder.com/20 class="Student_Icon"></img>
    <div className="Comments">5 Class Comments</div>
</div>

I made use of float: left; So the icon/image comes left and the text next to it.

CodePudding user response：

You can achieve this with flexbox styling. Note that I am changing your React structure a bit and also adding a fake image. And did you mean to use 1vw? that means 1% of the viewport width and is pretty small - esp on small screens.

Using and referencing REM units is more reliable ( REM is set in the root element and is usually 16px but can be changed. But the advantage of using rems is that it is a common size that all elements can access.

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

.Student_Icon {
  height: 1.5rem;
  width: 1.5rem;
}


.Comments {
    font-size: 1rem;
    margin-left: 8px;
  }

<div class="Comment_Icon">
  <img src="https://hipsiti.com/uploads/default-profile.png" alt="StudentIcon" class="Student_Icon"/>
  <span class="Comments">5 Class Comments</span>
</div>