I want the icon to be near the text inside the round box but its appearing down, here's my code.

HTML:

    <div className="RoundBox">
                               
        <div className="DashImages"><img src={PDF} alt="PDF"></img>
        <div className="IconText">PDF File</div>
                              
    </div>

CSS:

 img {
  width: 3vw;
  height: 3vw;
  margin-left: 1vw;
}

.IconText {
}

    .RoundBox {
  border-radius: 0.5vw;
  border: 1.5px solid grey;
  box-shadow: #e3eaf6;
  width: 20vw;
  height: 3vw;
  float: left;
}

CodePudding user response：

This should do the trick.

Div elements are block items so they will always try to fill the whole horizontal space if the display or width properties are not changed or the parent item overrides that behavior (eg. using FlexBox)

HTML

<div className="RoundBox">
                           
    <div className="DashImages"><img src={PDF} alt="PDF" /></div>
    <div className="IconText">PDF File</div>
                          
</div>

CSS

img {
  width: 3vw;
  height: 3vw;
  margin-left: 1vw;
}

.IconText {
padding-left: 10px
}

.RoundBox {
  border-radius: 0.5vw;
  border: 1.5px solid grey;
  box-shadow: #e3eaf6;
  width: 20vw;
  height: 3vw;
  float: left;
  display: flex;
  align-items: center;
}

CodePudding user response：

Your html is invalid with the image tag and you're missing a div. You would want to fix that first.

<div className="DashImages"><img src={PDF} alt="PDF" /></div>

You then have a couple options. Here are a two examples:

1. You can simply add float: left to the img css. I might recommend using a class rather than a selector which targets all img tags. Example

img {
  width: 3vw;
  height: 3vw;
  margin-left: 1vw;
  float: left;
}

2. You can also explore using flexbox adding display: flex; to your .RoundBox class. Note there are different alignment attributes that you can use to position elements using flex.

.RoundBox {
  border-radius: 0.5vw;
  border: 1.5px solid grey;
  box-shadow: #e3eaf6;
  width: 20vw;
  height: 3vw;
  float: left;
  display: flex;
}