logo标签列表

尝试将HTML按钮居中对齐在我的页面上。

htmlcssbuttonalignmentvertical-alignment
120

我试图让一个HTML按钮无论使用哪个浏览器都能恰好居中对齐到页面中心。但它可能会向左浮动，同时仍然在垂直中心，或者在页面上的任何位置（例如在页面顶部等）。

我希望它在垂直和水平方向上都能居中对齐。这是我现在写的代码：

<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
   mybuttonname
</button>
看这个：https://codepen.io/saily_center_button/pen/ZEeeEyr - Saily Jadhav
9个回答
174
这是您的解决方案：JsFiddle 基本上，将按钮放入一个带有居中文本的 div 中：
<div class="wrapper">
    <button class="button">Button</button>
</div>

以下是相应的样式：

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}

有很多种方法可以完成同一个任务，这只是其中之一。

这里我不能使用单独的CSS文件。实际上，这是一个嵌入HTML代码的XSL文件。只有一个按钮需要显示，因为这是一个小测试，以查看按钮的外观。因此，我不能为此按钮创建另一个CSS文件。如果我为此按钮创建另一个CSS文件，则需要一个XML、XSL和CSS文件来实现这个简单的功能。对于将来的复杂功能，我将使用单独的CSS。 - user1455116
但为什么要加入一个不必要的div呢？问题只是将按钮居中对齐。 - Ashwin G
1
@AshwinG，如果没有包装器，你无法居中一个 button 元素。唯一的方法是使用 body 作为包装器。这意味着所有内容都会居中。如果您想要非居中元素，则必须为其提供包装器元素。我认为添加额外的 div 不比应用于导航和其他页面元素的自定义规则更糟糕。 - Mohamad
这会将按钮的左边缘居中，但我想要将按钮的中心居中。来自Fiddle的截图 - Nick Graham
如果您要添加此样式，则需要像这样添加 left: 50%;，即 style="text-align: center; position: absolute; top: 50%; left: 50%;"。 - Lafftar
显示剩余3条评论
81
你可以通过使用margin:auto; display:block;来使一个button居中，而不需要在父级div上使用text-align。
例如： HTML代码： 
<div>
  <button>Submit</button>
</div>

CSS（层叠样式表）
button {
  margin:auto;
  display:block;
}
查看实际效果： CodePen
2
我的Bootstrap按钮无法工作... - user12465043
不适用于 MUI。 - Chukwuemeka Maduekwe
23

作者编辑：这个回答已经非常过时了！使用Flexbox或Grid会更好。

我最近真的很喜欢使用display: table来固定大小，使margin: 0 auto生效。这让我的生活变得更加轻松。你只需要克服“table”表示不是HTML表格的事实。

它在响应式设计中特别有用，因为当一切变得混乱不堪的时候，“50％左边”和“-50％右边”的东西就无法管理了。

style
{
   display: table;
   margin: 0 auto
}

JsFiddle

另外，如果你有两个按钮并且希望它们具有相同的宽度，你甚至不需要知道每个按钮的大小就可以让它们具有相同的宽度-因为表格会像魔术般将它们折叠起来。

enter image description here

JsFiddle

(如果它们是内联的，并且您希望将两个按钮居中对齐，则此方法也适用-使用百分比试试看吧！)

现在使用弹性盒子。Align-self: stretch - Simon_Weaver
或者网格！更加灵活 :-) - Simon_Weaver
10

尝试这个，它非常简单，如果你不能更改你的.css文件，那么这应该可以工作。

<p align="center">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button>
</p>
1
我已经尝试过了，这是与浏览器有关的问题，在IE中无法正确显示，可能是因为margin-right:auto和margin-left:auto在IE中没有被正确理解。 - user1455116
7

以下是所询问的解决方案：

<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>

对我来说不起作用。 - user12465043
6

有多种方法可以解决这个问题。下面介绍其中两种方法 -

第一种方法使用position: fixed - position: fixed; 相对于视口定位，这意味着即使页面滚动，它也始终停留在同一个位置。将左侧和顶部值添加到50％将其放置在屏幕中央。

 button {
   position: fixed;
   left: 50%;
   top:50%;
 }

第二种使用margin:auto的方法 - 使用"margin:0 auto;"进行水平居中，但是"margin:auto;"一直无法实现垂直居中... 直到现在！实际上，绝对居中只需要声明高度和以下样式：

button {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
}
1
虽然这段代码可能回答了问题，但提供关于它是如何解决问题的额外上下文信息会提高答案的长期价值。 - Ethan
嗨@Davіd，希望更新的答案能够帮助解决额外的问题。干杯 - MadhuriJain
5

对我而言，使用flexbox很有效。

在父级div/元素周围添加一个css类：

.parent {
    display: flex;
}

并且对于按钮的使用：

.button {
    justify-content: center;
}

你应该使用一个父级div，否则按钮不知道页面/元素的中间是哪里。
1
将其放置在另一个 div 中，使用 CSS 将按钮移动到中间位置：
<div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-align:center;">
    <button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname</button> 
</div>​

这是一个例子：JsFiddle
嗨，我在结果框中看到按钮位于极左边，并且位于页面的垂直中央，你看到的不是这样吗？ - user1455116
这取决于您使用的浏览器。我注意到IE不太喜欢margin-left和margin-right，所以要居中，请在div上使用text-align:center;来修复IE。 - Gyhth
0

将所有父元素的宽度和高度设置为100％，并使用display: table;和display:table-cell;，请查看工作示例。

Git版本演示

<!DOCTYPE html>
<html>
<head>
<style>
html,body{height: 100%;}
body{width: 100%;}
</style>
</head>
<body style="display: table; background-color: #ff0000; ">

<div style="display: table-cell; vertical-align: middle; text-align: center;">
    <button type="button" style="text-align: center;" class="btn btn-info">
       Discover More
    </button>
</div>

</body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接