如何根据屏幕尺寸对齐中心的按钮？

Question

有没有办法在屏幕中央对齐按钮（或任何其他对象）（这适用于任何尺寸的电脑屏幕）？ 我正在做一个项目，并尝试将按钮包装成div并设置text-align：center，但按钮仍然偏离中心，我想知道是否还有其他方法可以做到这一点？ 非常感谢你提前。

Answer 1

在text-align: center标记上设置button时，button { text-align: center; }无法正常工作的原因是该属性正在设置 按钮本身的文本对齐方式。

＆＃13;

＆＃13;

<button>Button</button>

＆＃13;

text-align: left

＆＃13;

＆＃13;

＆＃13;

我们可以通过设置按钮的宽度并设置button { width: 70vw; text-align: left; }。

来证明这一点

＆＃13;

＆＃13;

<button>Button</button>

＆＃13;

text-align: center

＆＃13;

＆＃13;

＆＃13;

要使按钮居中，我们可以将其父级设置为div { text-align: center; }。

＆＃13;

＆＃13;

<div>
  <button>Button</button>
<div>

＆＃13;

display: block;

＆＃13;

＆＃13;

＆＃13;

此外，我们可以将按钮设置为margin: 0 auto并应用button { display: block; margin: 0 auto; }。这使我们不必将按钮包装在容器元素中。

＆＃13;

＆＃13;

<button>Button</button>

＆＃13;

{  
   "@timestamp":"2017-09-08T17:23:38.677+01:00",
   "@version":1,
   "message":"A received request - withtimestanp",
   etc..

＆＃13;

＆＃13;

＆＃13;

Answer 2

这应该有效。 边距设置为自动包含div

.container {
    margin: auto;
    width: 100px;
}

<div class="container">
    <button>Submit</button>
</div>