Centering span with text in div with button in it

Question

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?

score 0 · Answer 1 · answered Jan 11 '22 at 03:08

Instead of floating, use absolute and relative positioning. Absolutely positioning the button will remove it from the flow of the document and not affect the span being centered with respect to the div.

div {
  position: relative;
}

button {
  position: absolute;
  left: 0;
}

<div style="text-align:center;">
  <button>
            Osoby
        </button>
  <span>
            Antoni Jankowski
        </span>
</div>

score -2 · Answer 2 · answered Jan 11 '22 at 03:25

-2

try this:

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

answered Jan 11 '22 at 03:25

anna

51
5

3

Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See https://stackoverflow.com/help/how-to-answer Thanks for all your help!! – Amir Naeem Jan 11 '22 at 03:57

HarisWebdesign · Accepted Answer · 2022-01-13T05:19:27.093

-3

**Try this**

Use "display: flex" property to avoid alignment and spacing issues. Advantages: There is no text limit for Button & Span tag.

<h1>Try this</h1>
    <div style="display:flex; align-items: flex-start;">
      <button 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>

edited Jan 13 '22 at 05:19

answered Jan 11 '22 at 03:23

HarisWebdesign

10
3

2

Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See https://stackoverflow.com/help/how-to-answer Thanks for all your help!! – Amir Naeem Jan 11 '22 at 03:57
1

Please add some details in your answer. – AsthaUndefined Jan 11 '22 at 06:12
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 11 '22 at 06:12

Centering span with text in div with button in it

3 Answers3