CODEWITHSUNDEEP
cssflexbox
Filippo854
Filippo854

Reputation: 149

Centering one flex item and and aligning second item to right by any amount of px

so im trying to exactly center one flex(unless anyone has other idea) item and aligning second one e.g 20px to right of my first item. My code:

<div className="d-flex justify-content-center border">
  <h1 className="title">Tacos</h1>
  <div className="icon"></div>
</div>

and this is the result enter image description here

As you can see, they both are centered, my goal is to put text "Tacos" in exact center and then align my icon like 20px to right. Is there a way to do it?

Upvotes: 1

Views: 128

Answers (1)

doÄŸukan
doÄŸukan

Reputation: 27381

You can use width: 0; white-space: nowrap; trick.

.flex {
  display: flex;
  justify-content: center;
}

.icon {
  width: 0;
  white-space: nowrap;
  margin-left: 20px;
}
<div class="flex">
  <div class="text">Tacos</div>
  <div class="icon">🌮🌮🌮🌮🌮🌮🌮</div>
</div>

Upvotes: 3

Related Questions