使内联块元素居中

Question

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

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

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

这是title元素的css：

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

我已经尝试设置边距：0 auto；，并且它似乎没有影响

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

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

如果你坚持仍然使用内联块，你可以使用Steve Saunders的解决方案。但是，由于文本对齐是一种继承的特性，您必须通过在您不希望应用此特性的块项目子项上设置文本对齐：left来"撤消"此特性。

Answer 4

当您使h1标记内联块时，它会部分丢失其块元素属性，因此宽度仅限于它所拥有的内容。这就是为什么文本对齐：居中不起作用。

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

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

希望这能帮助你寻找。