css使div中的两个输入居中

Question

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

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

我可以让按钮居中，但它们会堆叠在一起，一个接一个。我要么把一个放在另一个的上面并居中

-或者-

并排一直到左边。

另一个音符，如果重要的话。这是在cshtml c#.net页面上，其中包含引导程序：

@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将元素置于其他元素的中心。

在parent display: flex; flex-direction: row; justify-content: center和sons centers自动设置

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

Answer 2

因为您使用的是浮动，所以父级不会注意按钮的高度。所以你的2px红线就是一个高度为0的div的边框。

你需要使用浮动吗？如果你只是让div display:inline-block，你就可以解决高度和居中问题。

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

Answer 3

你可以简单地将它们从浮动的div中删除，因为浮动的块元素弄乱了你的居中位置，在这里。

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