css center two inputs in a div

Question

Why won't these buttons center and side-by-side?

These stack side-by-side but all the way to the left. And the red border is a 2px solid line. The button seems to be directly under the red border line. The buttons should be in the border.

I can get the buttons to center, but then they stack, one on top of the other. I either get one stacked on top of the other and centered

-or-

side-by-side and all the way to the left.

Another note, if it matters. This is on a cshtml c#.net page that includes bootstrap inside the:

@using (Html.BeginForm("frmUpdate", "Mdl", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))

. more of the page added below for clarity

<div style="float:left; width:100%;">
@using (Html.BeginForm("frmUpdate", "Mdl", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
<div style="float:left; width: 50%; border:1px solid black;">
.. left half ~ numerous controls ....
</div>
    <div style="float:left; width: 50%; border:1px solid red;">
.. right half ~ numerous controls ...
</div>

<div style="clear:both; width:100%; border:1px solid red; text-align:center;">
    <div style="float:left; position:relative">
        <input type="submit" value="Save" />
    </div>
    <div style="float:left;">
        <input type="button" value="Cancel" onclick="window.history.back()" />
    </div>
</div>

}

score 1 · Accepted Answer · answered Sep 26 '16 at 23:18

1

You can use FlexBox to center elements inner other element.

Set at parent display: flex; flex-direction: row; justify-content: center, and sons centers automatically

<div style="display:flex; justify-content:center; width:100%; border:1px solid red; text-align:center;">
    <div>
        <input type="submit" value="Save" />
    </div>
    <div>
        <input type="button" value="Cancel" onclick="window.history.back()" />
    </div>
</div>

answered Sep 26 '16 at 23:18

Alejandro Rt

90
6

Of course I have other things going on on the page before this part. your tip mostly works. I had to add "clear:both;" Certainly is an improvement. I'll work with it some more. – Steve Sep 27 '16 at 00:11

score 0 · Answer 2 · answered Sep 26 '16 at 23:01

0

Because you are using floats, the parent doesn't pay attention to the height of the buttons. So your 2px red line is just the border around a 0 height div.

Do you need to use floats? If you just make the divs display:inline-block you can solve the height and centering.

<div style="width:100%; border:1px solid red; text-align:center;">
  <div style="display:inline-block">
    <input type="submit" value="Save" />
</div>
<div style="display:inline-block">
    <input type="button" value="Cancel" onclick="window.history.back()" />
</div>

https://jsfiddle.net/hy9nswyg/

answered Sep 26 '16 at 23:01

grayimp

318
1
9

I should add, that if you do want floats, you can solve the height issue with a clearfix such as suggested here: http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing But that doesn't get you centered. – grayimp Sep 26 '16 at 23:02
Do I have to use floats, no. Just know that the part of the page just prior is two divs dividing the upper portion of the page into left and right. These are floated. Hence the "clear;both; you see I tried every combination I could think of and find on google. your fiddle example seems to be providing some promise but i will have to do a little more to it. Thanks. – Steve Sep 27 '16 at 00:19

score 0 · Answer 3 · answered Sep 26 '16 at 23:02

0

You can simply remove them from their floating divs, as the floating block elements are messing up your centering, here.

<div style="clear:both; width:100%; border:1px solid red; text-align:center;">
    <input type="submit" value="Save" />
    <input type="button" value="Cancel" onclick="window.history.back()" />
</div>

answered Sep 26 '16 at 23:02

Will Ray

9,513
3
39
57

This is my base line I keep returning to when I get down a course that isn't getting to my goal. – Steve Sep 27 '16 at 00:25

score 0 · Answer 4 · answered Sep 26 '16 at 23:26

Dont know which one actually correct for you live fiddle

<div style="clear:both; width:100%; border:1px solid red; text-align:center;">
  <div style="display:inline-flex; ">
    <input type="submit" value="Save" />
  </div>
  <div style="display:inline-flex; ">
    <input type="button" value="Cancel" onclick="window.history.back()" />
  </div>
</div>
<div style=" margin:20px;"></div>
<!--only for space -->
<div style="clear:both; width:100%; border:1px solid red; text-align:center;">
  <div style="display:inline-flex; ">
    <input type="submit" value="Save" />
  </div>
  <div>
    <input type="button" value="Cancel" onclick="window.history.back()" />
  </div>
</div>

Your upper example is what I'm shooting for. The lower is exactly what I can;t get rid of. you inline-flex & Gary's inline-block are giving me both the same result. Both very promising. — Steve, Sep 27 '16 at 00:23

score 0 · Answer 5 · answered Sep 27 '16 at 00:48

At the end of the day Alejandro's is the most succinct. All answers are appreciated and all are very nearly the same. Any down sides to Alejandro's? I made both the left & right of the top page portion statically height setting (didn't really want to but was compelling) and some padding. how looks just about as i wanted.

css center two inputs in a div

5 Answers5