Media Screen - center a button

Question

How do you center a button on a media screen only?

At the moment I have

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

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

It doesn't center the button on a media screen or otherwise. I feel like I'm obviously doing something wrong but I can't figure out why.

Answer 1

This is happening because the <span> is an inline element. You cannot centre the button, because the inline element only takes up as much width as necessary.

You have a couple of options:

1. Tell the browser to treat your span as a block element. You can do this by adding the following to your CSS display:block .
2. Change your <span> to a <div> . The <div> is a block element by default, and would take the whole width of the page.

The <div> would be the preferred option.

Answer 2

This should do the job since div is a block level element.

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

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