Question

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

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

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

-OR -

并排，一直到左边。

另一个注意事项，如果重要的话。这是在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

因为你正在使用花车，所以父母不会注意按钮的高度。所以你的2px红线就是0高度div的边界。

你需要使用花车吗？如果您只是显示div：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 2

你可以简单地将它们从浮动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>

Answer 3

您可以使用FlexBox将元素置于其他元素内部。

设置为父display: flex; flex-direction: row; 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>

Answer 4

不知道哪一个实际上对你有用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>

Answer 5

在一天结束时，亚历杭德罗是最简洁的。所有的答案都很受欢迎，而且几乎都是一样的。亚历杭德罗的任何不利方面？我做了左边和左边的页面顶部部分的静态高度设置（不是真的想但是引人注目）和一些填充。如何看起来就像我想要的那样。

css将div中的两个输入集中在一起

5 个答案: