css - 媒体屏幕 - 居中按钮

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. 告诉浏览器将您的跨度视为 block 元素。您可以通过将以下内容添加到您的 CSS display:block 来完成此操作.
2. 更改您的 <span>到 <div> . <div>默认情况下是一个 block 元素，并且会占据页面的整个宽度。

<div>将是首选。