CSS to have content on center and something on right of the div

Question

How can I have content on the center and an icon on the right of the div. This currently gives something like this:

But I want it to be like this:

Notice in the above 50% is in the center of div and pencil icon is on the right.

.w-100 {
  width: 100%;
}

<div class="w-100">
  <p>{value}</p>
  <img src="https://via.placeholder.com/50" />
</div>

If you're using Bootstrap, please tag the appropriate version. FYI, there's a typo in your icon tag. This isn't a React question. — isherwood, Dec 21 '22 at 14:11
I know two ways, the first is using empty span with display flex and justify content space between, or give the div text align center and the icon float right but you'll get some issues when the div size goes short — Omar Zaoujal, Dec 21 '22 at 14:18
Does this answer your question? [Vertically align text next to an image?](https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) — isherwood, Dec 21 '22 at 15:11
@OmarZaoujal, answers go down there. Please take the [tour] if you need a refresher. — isherwood, Dec 21 '22 at 15:12

Adam · Answer 1 · 2022-12-21T14:33:35.997

You can do this 2 ways:

The standard flexbox approach. Use align-items: center to put the text in the middle but there's a gotcha in that if there are two items stacked on top of each other and the icon on the top one is 50 pixels wide and the next below one is 80 pixels wide then the center-aligned element may not be aligned on top of each other correctly.
To make sure your element is 100% placed in the middle, use 3 divs, with flex-grow: 1 to make 3 equally wide containers then use margins to position the child elements to the center or right.

Also have a look at a similar answer on stackoverflow

.container {
  display: flex;
  width: 100%;
}

.container>div {
  flex-grow: 1;
  display: flex;
}

.container>div:nth-child(2)>p {
  margin-inline: auto;
}

.container>div:last-child>img {
  margin-left: auto;
}

<div class="container">
  <div></div>
  <div>
    <p>50%</p>
  </div>
  <div>
    <img src='https://placekitten.com/50/50' />
  </div>
</div>

score 1 · Answer 2 · edited Dec 21 '22 at 14:17

1

You can use flexbox for this...

.w-100 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img-icon {
  align-self: end;
}

<div class="w-100">
  <p>{value}</p>
  <img class='img-icon' src="https://via.placeholder.com/50" />
</div>

edited Dec 21 '22 at 14:17

David Thomas

249,100
51
377
410

answered Dec 21 '22 at 14:16

Usama Saeed

331
4
16

score 1 · Answer 3 · answered Dec 21 '22 at 14:20

You can use display:flex on parent element and flex-grow: 1 on the element you want to stretch.

See the Snippet below:

.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: 1px solid lightgray;
}

p {
  text-align:center;
  flex-grow: 1;
}

<div class="content">
  <p>50%</p>
  <img src="https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/24/edit-icon.png" width="24" height="24" />
</div>

CSS to have content on center and something on right of the div

3 Answers3