我正在尝试将一个HTML按钮精确地对齐在页面的中心,而不管使用的是哪种浏览器。它要么漂浮在左边,同时仍然在垂直中心,要么在页面上的某个地方,比如页面的顶部,等等。
我想让它在垂直方向和水平方向都居中。下面是我现在写的内容:
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname
</button>
发布于 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%;
}
给猫剥皮的方法有很多种,这只是其中之一。
发布于 2014-07-30 15:30:05
作者编辑:这是一个非常过时的答案!Flexbox或grid更好。
我最近真的很喜欢display: table
,给它一个固定的大小,比如让margin: 0 auto
正常工作。让我的生活变得轻松多了。你只需要克服这样一个事实,' table‘显示并不意味着表格html。
对于响应式设计来说,它特别有用,当事情变得混乱和疯狂时,50%的人离开了这个,50%的人变得无法管理。
style
{
display: table;
margin: 0 auto
}
此外,如果你有两个按钮,你想让它们的宽度相同,你甚至不需要知道每个按钮的大小就可以让它们变得相同-因为表格会神奇地为你折叠它们。
(如果它们是内联的,并且您想要将两个按钮左右居中-尝试使用百分比!)。
发布于 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>
https://stackoverflow.com/questions/11799159
复制相似问题