c# - css 将两个输入置于一个 div 中

Question

为什么这些按钮不能居中和并排？

这些并排堆叠，但一直向左堆叠。红色边框是一条 2px 的实线。该按钮似乎就在红色边框线的正下方。按钮应位于边框中。

我可以让按钮居中，但随后它们会堆叠，一个在另一个之上。我要么将一个堆叠在另一个之上并居中

-或-

并排，一直向左。

另一个注意事项，如果重要的话。这是在 cshtml c#.net 页面上，其中包含 Bootstrap :

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

.为了清楚起见，下面添加了更多页面

<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 1

您可以使用 FlexBox 使元素在其他元素内居中。

在父级设置 display: flex; flex 方向:行； justify-content: center，儿子自动居中

<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>