媒体屏幕 - 使按钮居中

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. 告诉浏览器将 span 视为块元素。您可以通过将以下内容添加到您的 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>