i want to place the text near the image inside the round box

Question

Its looking like this

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

just add `display:flex` to the `.RoundBox`. divs 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 behaviour (eg. using FlexBox) — Cornel Raiu, Sep 23 '21 at 16:02
Welcome to Stack Overflow! What have you tried? It doesn't look like you attempted to put the two elements next to each other. There are plenty ways to do this. Also, you have an error in your HTML since you don't close the DashImages div. https://stackoverflow.com/a/24292602/1172189 — disinfor, Sep 23 '21 at 16:02
Does this answer your question? [How to place div side by side](https://stackoverflow.com/questions/2637696/how-to-place-div-side-by-side) — Cornel Raiu, Sep 23 '21 at 16:03
Yess, all your comments helped me it worked I'm still fairly new to web dev so thanksss. — Youssef Moussa, Sep 23 '21 at 16:14

score 0 · Answer 1 · answered Sep 23 '21 at 16:16

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

score 0 · Answer 2 · answered Sep 23 '21 at 16:21

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:

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

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

i want to place the text near the image inside the round box

2 Answers2