How to center button when span widths are different

Question

How do I get the button id= button1 to match up with the button id=button2? I'm trying to get button1 horizontally in the middle of the page. I need this to work on chrome.

<div id='todoCnts' style="text-align:center">
    <span id='checkCnt' style="float:left">Item Count :</span>
    <button id='button1' >New TODO</button>
    <span id='uncheckCnt' style="float:right">Item Count for the win:</span>
    <br>
    <button id='button2' >New TODO</button>
 </div>

Have a look at [this answer](https://stackoverflow.com/a/33049198/4204026). Flex really is the way to go for these situations - floats are almost evil. — Drew Kennedy, Oct 01 '18 at 23:30

score 2 · Accepted Answer · answered Oct 01 '18 at 23:54

2

You can try flexbox like this. It will also be responsive on small screens.

#todoCnts {
  display:flex;
  flex-wrap:wrap;
}
#todoCnts > span {
  flex:1;
}
#uncheckCnt {
 text-align:right;
}
#todoCnts > div {
  flex-basis:100%;
  text-align:center;
}

<div id='todoCnts'>
    <span id='checkCnt' >Item Count :</span>
    <button id='button1' >New TODO</button>
    <span id='uncheckCnt' >Item Count for the win:</span>
    <div><button id='button2' >New TODO</button></div>
</div>

answered Oct 01 '18 at 23:54

Temani Afif

245,468
26
309
415

this is great. I notice though that you don't need: #todoCnts > div { flex-basis:100%; text-align:center; } – DCR Oct 02 '18 at 00:20
ahh, if you delete the second button or move it out of the upper div then you can remove the css as indicated – DCR Oct 02 '18 at 14:49

Alohci · Answer 2 · 2018-10-02T00:10:33.543

0

You need to take the centered button out of the flow, so that it ignores the floats.

Edit: For the benefit of Chrome, we need to change the markup slightly.

Or you can use Temani's "transform" solution. See the comments.

#button1wrapper {
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
}

<div id='todoCnts' style="text-align:center">
    <span id='checkCnt' style="float:left">Item Count :</span>
    <div id='button1wrapper'><button id='button1' >New TODO</button></div>
    <span id='uncheckCnt' style="float:right">Item Count for the win:</span>
    <br>
    <button id='button2' >New TODO</button>
 </div>

edited Oct 02 '18 at 00:10

answered Oct 01 '18 at 23:42

Alohci

78,296
16
112
156

doesn't work on chrome... you will probably tell us why because it works fine on FF – Temani Afif Oct 01 '18 at 23:47
doesn't work. I need button1 on the same line as the spans – DCR Oct 01 '18 at 23:47
@DCR it's ok on FF, and we never downvote Alohci !! :p – Temani Afif Oct 01 '18 at 23:48
@TemaniAfif - Thanks. Actually, I don't know what Chrome's doing there. I'll have to think about it. In the meantime at least, I recommend your answer. – Alohci Oct 01 '18 at 23:57
Ah, It's to do with the "magic" CSS of buttons. I doubt this approach can be fixed without changing the markup. – Alohci Oct 02 '18 at 00:07
@Alohci I thought the same, button are always *strange*. we can use the classic transform trick then: https://jsfiddle.net/akw0g25q/ – Temani Afif Oct 02 '18 at 00:08
awesome. Thanks for all your help – DCR Oct 02 '18 at 00:25

score -2 · Answer 3 · answered Oct 01 '18 at 23:25

-2

Try to use flexbox, it is made for exactly this! Set id="todoCnts" style to:

display: flex;
align-items: center;
justify-content: center;

And the children div to "margin: auto"

answered Oct 01 '18 at 23:25

Seroosh Saba

1
1

How to center button when span widths are different

3 Answers3