在底部中心的面板内放置一个按钮（asp.net）

Posted 2023-03-29

【中文标题】在底部中心的面板内放置一个按钮（asp.net）

【英文标题】：position a button inside a panel in bottom center (asp.net)

【发布时间】：2011-12-29 17:59:30

【问题描述】：

我读到了关于在 div 中居中（底部居中）按钮的信息，这就像在面板中居中按钮一样。 我通过将其添加到按钮的 CSS 中成功地做到了这一点：

 position:absolute; 
  margin-left:50%;
  margin-right:50%;
  bottom:  5px; 

面板的css属性是：

position:relative;

问题在于它以按钮的左侧居中，因此按钮本身及其整个宽度都没有居中。

如何使按钮的中心居中，使按钮看起来像真正居中？

【参考方案1】：

例如，如果你有position absolute，就这样写：

button
   position:absolute; 
   margin-left:-100px;
   left:50%;
   width:200px;
   bottom:5px;

注意：给margin-lefthalfwidthbutton

【讨论】：

我没有，是别人。你有正确的答案，但在“左：-50%”中没有减号。它应该留下：50％。所以谢谢 ：）。我无法将 V 标记为正确答案，因为人们会在不阅读我的评论的情况下复制粘贴它并弄错......，你可以编辑它吗？

@Rodniko;这是一个拼写错误:)

如果不知道px的宽度会怎样，因为你想使用容器div的百分比，例如按钮必须占宽度的80%。

【参考方案2】：

代替：

margin-left:50%;
margin-right:50%;

试试

margin-left:auto;
margin-right:auto;

【讨论】：

不起作用，按钮出现在左下角。不过还是谢谢:)

如果您可以发布您的实际代码或给我们一个测试站点的链接，我们可能会为您提供更多帮助。

你也可以试试：text-align: center;

【参考方案3】：

你应该使用

margin : 0 auto;

而不是margin-left 和margin-right

表示上下边距为 0 px（你也可以设置！！），左右边距为自动。它将居中，对象。

并删除position : absulote;

live example

【讨论】：

尝试将text-align:center; 添加到您的面板中。