Javascript 将内联块元素居中

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

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

它工作正常，但如果我在title元素中进行更改，文本align:center将停止工作

这是title元素的css：

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

---

我已尝试设置边距：0自动；，而且它似乎没有效果

您需要将

文本对齐：居中

添加到要居中的

内联块

元素的父级

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

---

您可以这样设置标题的样式：

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

---

要使代码正常工作，应该使用正常的display:block行为。顺便说一下，这是默认值。如果将文本对齐：居中设置为常规块，则文本将居中。因此，您可以单独将标题/副标题内容居中，其余内容保持正常

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


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

---

如果您坚持仍然使用内联块，您可以使用Steve Saunders的解决方案。但是，由于文本对齐是一种继承特性，因此您必须通过在块项子项上设置text align:left来“撤消”该特性，而您不希望将其应用于这些子项。

当您制作h1标记内联块时，它会部分释放其块元素属性，因此宽度仅限于它所具有的内容。这就是文本对齐：居中不起作用的原因

因此，您可以使用.title类在h1标记或任何块元素中插入span并使用该属性

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

---

希望这有助于您的搜索。

但这将使我的所有内容集中在我的.container.body中。@MaybeX是的。如果您不希望发生这种情况，可以在标题周围添加另一个div，并对其应用

text align:center

。

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