css在一个div中居中两个输入答案

【问题标题】：css center two inputs in a divcss在一个div中居中两个输入
【发布时间】：2016-09-27 08:48:04
【问题描述】：

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

这些并排堆叠，但一直到左侧。而红色边框是一条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>

}

【问题讨论】：

标签： c# html css

【解决方案1】：

您可以使用 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>

【讨论】：

当然我在这部分之前的页面上还有其他事情要做。你的小费大多有效。我不得不添加“clear:both;”当然是一种改进。我会再做一些工作。

【解决方案2】：

因为你使用的是浮动，所以父级不会关注按钮的高度。所以你的 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/

【讨论】：

我应该补充一点，如果你确实想要浮动，你可以通过如下建议的 clearfix 解决高度问题：stackoverflow.com/questions/218760/… 但这不会让你居中。
我必须使用花车吗，不。只要知道页面的前面部分是两个div，将页面的上部分为左右。这些是浮动的。因此，“清晰；两者；你看我尝试了所有我能想到并在谷歌上找到的组合。你的小提琴示例似乎提供了一些承诺，但我将不得不做更多的事情。谢谢。

【解决方案3】：

您可以简单地将它们从它们的浮动divs 中删除，因为浮动块元素会扰乱您的居中，在这里。

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

【讨论】：

这是我的基线，当我走上一条没有达到目标的路线时，我会不断返回。

【解决方案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>

【讨论】：

你上面的例子就是我要拍摄的。较低的正是我无法摆脱的。你 inline-flex 和 Gary 的 inline-block 给了我同样的结果。两者都非常有前途。

【解决方案5】：

在一天结束时，Alejandro's 是最简洁的。所有答案都受到赞赏，并且几乎相同。亚历杭德罗有什么缺点吗？我将首页部分的左侧和右侧都设置为静态高度设置（并不是真的想要但很引人注目）和一些填充。看起来和我想要的一样。

【讨论】：