媒体屏幕-将按钮居中

Question

您如何仅将按钮放在媒体屏幕上居中？

此刻我有

@media screen and (min-width: 600px)  {
    .mobile-break1 {  text-align:center; }
}

<span class="mobile-break1"><button>Book Online</button></span>

它不会使按钮在媒体屏幕上居中显示。我觉得我显然做错了事，但我不知道为什么。

Answer 1

之所以会这样，是因为<span>是一个内联元素。您不能使按钮居中，因为内联元素仅占用必要的宽度。

您有两种选择：

1. 告诉浏览器将您的跨度视为一个块元素。您可以通过将以下内容添加到CSS display:block中来实现。
2. 将您的<span>更改为<div>。 <div>默认情况下是一个块元素，它将占据页面的整个宽度。

<div>是首选。

Answer 2

由于div是一个块级元素，因此应该可以完成工作。

@media screen and (min-width: 600px)  {
    .mobile-break1 {
      text-align:center;
    }
}

<div class="mobile-break1">
  <button>Book Online</button>
</div>