Centering span with text in div with button in it

January 11, 2022

My code looks like this:

<div style="text-align:center;">
  <button style="float:left;" onclick="openNav()">
            Osoby
        </button>
  <span>
            Antoni Jankowski
        </span>
</div>

Unfortunately text-align:center makes it center only in the remaining space not taken by the button so its position a little too far to the right. Is it possible to just make it ignore a button? Or are there any other solutions?

>Solution :

**Try this**

<h1>Try this</h1>
    <div style="display:flex; align-items: flex-start;">
      <button onclick="openNav()" style="flex-shrink:0; margin-right:6px">
        This is your Button
      </button>
      <span style="flex-grow: 1; display: flex; justify-content: center;">
        Center Text in span tag
      </span>
    </div>