试图在我的页面中心对齐 html 按钮 [重复]
Posted
技术标签:
【中文标题】试图在我的页面中心对齐 html 按钮 [重复]【英文标题】：trying to align html button at the center of the my page [duplicate] 【发布时间】：2012-08-01 16:55:19 【问题描述】：我正在尝试将 html 按钮准确地对齐在页面的中心，而与使用的浏览器无关。它要么向左浮动，同时仍处于垂直中心，要么位于页面上的某个位置，如页面顶部等。
我希望它垂直和水平居中。这是我现在写的：
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname
</button>
【问题讨论】：
看看这个：codepen.io/saily_center_button/pen/ZEeeEyr 【参考方案1】：作者编辑：这是一个非常过时的答案！ Flexbox 或网格要好得多。
我最近真的很喜欢 display: table 给东西一个固定的大小，比如让 margin: 0 auto 工作。让我的生活轻松了很多。您只需要克服“表格”显示并不意味着表格 html 的事实。
这对于响应式设计特别有用，其中 50% 的事情会变得棘手和疯狂，而 -50% 的事情会变得无法管理。
style
display: table;
margin: 0 auto
JsFiddle
此外，如果您有两个按钮并且您希望它们具有相同的宽度，您甚至不需要知道每个按钮的大小来使它们具有相同的宽度 - 因为表格会神奇地为您折叠它们。
JsFiddle
（如果它们是内联的并且您想将两个按钮并排居中，这也可以使用 - 尝试使用百分比！）。
【讨论】：
现在使用弹性盒子。对齐自我：拉伸 还是网格！更灵活:-)【参考方案2】：您可以在不使用 text-align 的情况下将 button 居中在父 div 上，只需使用 margin:auto; display:block;
例如：
HTML
<div>
<button>Submit</button>
</div>
CSS
button
margin:auto;
display:block;
查看实际情况： CodePen
【讨论】：
在引导程序中对我的按钮不起作用... 不能在 mui 中工作【参考方案3】：使所有父元素具有 100% 宽度和 100% 高度并使用 display: table; 和 display:table-cell;，检查工作示例。 p>
Working Git Version
<!DOCTYPE html>
<html>
<head>
<style>
html,bodyheight: 100%;
bodywidth: 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>
【讨论】：
【参考方案4】：将它放在另一个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
【讨论】：
你好，我在结果框中看到，按钮在最左边，在页面的垂直中间，你看到的不是这样吗？ 这取决于您使用的浏览器。我注意到 IE 不喜欢 margin-left 和 margin-right 的东西，所以居中使用 text-align: center;在 div 上为 IE 修复它。【参考方案5】：这是您的解决方案：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 来完成未来的功能 看我的编辑，这个小提琴：你应该能够抓住那个 CSS 并把它内联：jsfiddle.net/7Laf8 您好，IE 将其显示在最左侧，但仍位于垂直中心。但是当我在我的文件中使用你的代码时，它在我的页面上显示得很好。今天晚上我也必须检查其他浏览器。谢谢 确保没有其他 CSS 干扰它。那可能是个问题！不客气！ @AshwinG 你不能在没有包装器的情况下将button 元素居中。唯一的方法是使用body 作为包装器。这意味着一切都以中心为中心。如果您想要非居中元素，则必须为这些元素提供包装器元素。我认为额外的 div 并不比为导航和其他会受到影响的其他页面元素应用自定义规则更糟糕。【参考方案6】：
有多种方法可以解决相同的问题。两个PFB——
第一种使用位置的方式：固定 - 位置：固定；相对于视口的位置，这意味着即使页面滚动，它也始终保持在同一个位置。将 left 和 top 值添加到 50% 会将其置于屏幕中间。
button
position: fixed;
left: 50%;
top:50%;
使用边距的第二种方式：自动 -margin: 0 auto;用于水平居中，但边距：自动；一直拒绝为垂直定心工作……直到现在！但实际上绝对居中只需要声明的高度和这些样式：
button
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 40px;
【讨论】：
虽然此代码可以回答问题，但提供有关 如何 和/或 为什么 解决问题的附加上下文将改善答案的长期价值。 嗨@Davіd希望更新的答案将有助于额外的上下文。干杯【参考方案7】：对我来说，它使用 flexbox 工作。
在父 div / 元素周围添加一个 css 类：
.parent
display: flex;
对于按钮的使用：
.button
justify-content: center;
您应该使用父 div，否则按钮不“知道”页面/元素的中间是什么。
【讨论】：
【参考方案8】：这是所要求的解决方案
<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>【讨论】：
不适合我【参考方案9】：试试这个，它很简单，你不能对你的 .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>
【讨论】：
我已经尝试过了，这取决于浏览器在 IE 中无法正确显示，可能是因为 IE 无法正确理解 margin-right:auto 和 margin-left:auto以上是关于试图在我的页面中心对齐 html 按钮 [重复]的主要内容，如果未能解决你的问题，请参考以下文章