使内联块元素居中

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ÇASUA RESERVA”居中，为此，我正在使用：

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

一切正常，但是如果我在title元素中进行更改，则text-align：center会停止工作。

这是title元素的CSS：

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

我已经尝试了设置边距：0自动；并且似乎没有效果

Answer 1

您需要将text-align: center添加到要居中的inline-block元素的父 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

为了使代码正常工作，您应该使用常规显示方式：阻止行为。 顺便说一下，这是默认值。 如果将text-align：center设置为常规块，它将使文本居中。 因此，您可以单独将标题/字幕内容居中放置，而其余部分保持正常。

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


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

如果您仍然坚持使用嵌入式块，则可以使用Steve Saunders的解决方案。 但是由于text-align是一个继承的特征，因此您必须通过设置text-align：取消“取消”此操作：将其保留在块状项的子项上，您不希望将其应用于该子项。

Answer 4

当您将h1标签设置为内联块时，它会部分地松散其块元素属性，因此宽度受到其内容的限制。 这就是为什么text-align：center不起作用。

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

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

希望这对您正在寻找的东西有所帮助。