-1

I have a row with several elements (left, center and right).

My problem is that the element in the center is not centered at the level of the screen but at the level of the row.

How can I center that element at the screen level?

When I reduce the screen (mobile) the row gains a horizontal scroll, but it is aligned to the left. Is there a way to always align it to the center and keep it responsive?

DEMO

code

<span style="width:100%; justify-content:center; display:flex">Center!!</span>

<div class="d-flex justify-content-between flex-nowrap myrow">
<div>
<span style="margin-right:10px">align me in left</span>
<span>align me in left</span>
</div>
<div>
  <span>align me in center</span>
</div>
<div>
  <span>align me in right</span>
</div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Mike Landers
  • 440
  • 5
  • 14
  • Since you have bootstrap tagged as well, I'm assuming you use bootstrap too? I'm not all too familiar with flex. However, in Bootstrap, there's a class: `.text-center`. Try that. If that doesn't work, you should work on centering the container in a way so that the text wil be at the desired position. – Martin Mar 05 '20 at 10:03

1 Answers1

-1

Look at this example. Maybe it help you demo

sioniks
  • 29
  • 6