Медиа Экран - центр кнопки

Question

Как расположить кнопку по центру только на медиаэкране?

На данный момент у меня есть

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

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

Он не центрирует кнопку на экране мультимедиа или иным образом. Я чувствую, что, очевидно, что-то делаю не так, но не могу понять, почему.

Answer 1

Это должно сделать работу, поскольку div является элементом уровня блока.

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

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

Answer 2

Это происходит потому, что <span> является встроенным элементом. Вы не можете центрировать кнопку, потому что встроенный элемент занимает столько ширины, сколько необходимо.

У вас есть несколько вариантов:

1. Скажите браузеру, что ваш интервал следует рассматривать как элемент блока. Вы можете сделать это, добавив следующее в ваш CSS display:block.
2. Измените <span> на <div>. <div> по умолчанию является блочным элементом и занимает всю ширину страницы.

<div> будет предпочтительным вариантом.