javascript - 居中行内 block 元素

Question

我想要一个内联 block 元素居中，里面有一个文本。

这是 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>

我只需要标题和副标题“FAÇA SUA RESERVA”居中，为此我正在使用:

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

它工作正常，但如果我在标题元素中进行更改，text-align: center 它将停止工作..

这是标题元素的 css:

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

我已经尝试设置 margin: 0 auto;，但似乎没有效果

Answer 1

您需要将 text-align: center 添加到您想要居中的 inline-block 元素的 parent。

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