Right now, the below HTML is aligned to the left of the page. Can we align to the center of the page

<span class="center"> <u>Weekly : 392K</u> </span>, &nbsp;&nbsp;&nbsp; <span class="center"> Monthly : 408K </span>, &nbsp;&nbsp;&nbsp; <span class="center"> Yearly : 605.6K </span>

CodePudding user response：

Option a: use a display: flex; while justify-content: center; on your CSS class center. This would be one way to do it.

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

<span class="center"> <u>Weekly : 392K</u> </span> &nbsp;&nbsp;&nbsp; <span class="center"> Monthly : 408K </span> &nbsp;&nbsp;&nbsp; <span class="center"> Yearly : 605.6K </span>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
Option b: The way I would do it is this way. Instead of putting a class on all of your spans individually, why not just contain them in a div and use one class? Just define the width to 100%, then you all you have to say is text-align: center;

.container {
  width: 100%;
  text-align: center;
}

<div class="container">
  <span><u>Weekly : 392K</u></span>
  <span>Monthly : 408K</span>
  <span>Yearly : 605.6K</span>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Also - you don't have to use commas to separate your spans. If you wan't them to break and be on their own line you can use <br> which breaks the line after each span.

CodePudding user response：

This doesn't work because span elements have a display: inline property on them, use a p tag or apply display: block to it.