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ÇASAARESERVA”，因为我正在使用：

.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;
}

我已经尝试设置margin：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行为。这是默认值。如果将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是一种遗传特性，你必须＆＃34;撤消＆＃34;这可以通过在您不希望将其应用于的块项目子项上设置text-align：left。

Answer 4

当您使用h1标记内联块时，它会部分地丢失其块元素属性，因此宽度仅限于它具有的内容。这就是text-align：center不起作用的原因。

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

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

希望这有助于您所寻找的目标。

以内联块元素为中心

4 个答案: