Steve Steve - 2 months ago 8
C# Question

css center two inputs in a div

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>


}

Answer

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>