Centering a inline-block element

Question

I want center a inline-block element, with a text inside.

This is the HTML:

<div class="container body">
        <h1 class="title">FAÇA SUA RESERVA</h1>
        <p>Escolha o dia que deseja participar e aceite o nosso aplicativo.</p>
        <hr>
        <div class="row">
            <div class="box thursday col-xs-6 col-sm-3">
                <img src="assets/images/box.png">
            </div>
            <div class="box friday col-xs-6 col-sm-3">
                <img src="assets/images/box.png">
            </div>
            <div class="box friday_2 col-xs-6 col-sm-3">
                <img src="assets/images/box.png">
            </div>
            <div class="box saturday col-xs-6 col-sm-3">
                <img src="assets/images/box.png">
            </div>
            <div class="col-9">
            </div>
        </div>

I need center just the title, and the subtitle "FAÇA SUA RESERVA", for this i'm using:

.container.body .subtitle,
.container.body .title {
  text-align: center;
}

It's working ok, but if i make changes in the title element, the text-align: center it stops working..

This is the css for the title element:

.title {
  display: inline-block;
  border: 1px solid #F98835;
  color: #f98835;
  padding: 10px;
}

i already try setup margin: 0 auto;, and it doesn't seem to have an effect

Answer 1

You need to add text-align: center to the parent of the inline-block element that you want to center.

.container.body {
  text-align: center;
}

Answer 2

you can style your title like so :

 .title {
            width:330px;
            border: 1px solid #F98835;
            color: #f98835;
            padding: 10px;
            margin: 0 auto;
        }

Answer 3

For your code to work you should be using the normal display: block behavior. This is the default value by the way. If you set the text-align: center to regular blocks it will center the text within. So you can individually center header/subtitle content and leave the rest normal.

.container.body .subtitle,
.container.body .title {
  text-align: center ;
}


.title {
  display: block;
  border: 1px solid #F98835;
  color: #f98835;
  padding: 10px;
}

If you insist on still using an inline-block you can use the solution by Steve Saunders. But since text-align is an inherited trait you will have to "undo" this by setting text-align: left on the block-item children you do not want this to apply to.

Answer 4

as you make your h1 tag inline-block, it looses its block element properties partially, thus the width is limited to the content it has. That's why text-align: center does not work.

So, you can insert span inside the h1 tag or any block element with .title class and use that property.

.title span {
  display: inline-block;
  border: 1px solid #F98835;
  color: #f98835;
  padding: 10px;
}

Hope this helps what you are looking for.