正在尝试将html按钮与我的页面的中心对齐
正在尝试将html按钮与我的页面的中心对齐
提问于 2012-08-03 23:53:37
我正在尝试将一个HTML按钮精确地对齐在页面的中心，而不管使用的是哪种浏览器。它要么漂浮在左边，同时仍然在垂直中心，要么在页面上的某个地方，比如页面的顶部，等等。
我想让它在垂直方向和水平方向都居中。下面是我现在写的内容：
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname
</button> 回答 6
Stack Overflow用户
回答已采纳
发布于 2012-08-03 23:56:44
这就是你的解决方案：JsFiddle
基本上，将你的按钮放在一个带有居中文本的div中：
<div class="wrapper">
<button class="button">Button</button>
</div>具有以下样式：
.wrapper {
text-align: center;
}
.button {
position: absolute;
top: 50%;
}给猫剥皮的方法有很多种，这只是其中之一。
Stack Overflow用户
发布于 2014-07-30 15:30:05
作者编辑:这是一个非常过时的答案！Flexbox或grid更好。
我最近真的很喜欢display: table，给它一个固定的大小，比如让margin: 0 auto正常工作。让我的生活变得轻松多了。你只需要克服这样一个事实，' table‘显示并不意味着表格html。
对于响应式设计来说，它特别有用，当事情变得混乱和疯狂时，50%的人离开了这个，50%的人变得无法管理。
style
{
display: table;
margin: 0 auto
}此外，如果你有两个按钮，你想让它们的宽度相同，你甚至不需要知道每个按钮的大小就可以让它们变得相同-因为表格会神奇地为你折叠它们。
(如果它们是内联的，并且您想要将两个按钮左右居中-尝试使用百分比！)。
Stack Overflow用户
发布于 2012-08-04 00:20:28
试试这个，它很简单，告诉你不能修改你的.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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11799159
复制相关文章
相似问题
腾讯云开发者
