使内联块元素居中答案

【问题标题】：Centering a inline-block element使内联块元素居中
【发布时间】：2023-03-23 00:30:01
【问题描述】：

我想要一个 inline-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;，好像没有效果

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：

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

【解决方案2】：

你可以像这样设置你的标题：

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

【讨论】：

【解决方案3】：

为了使您的代码正常工作，您应该使用正常的 display: 块行为。顺便说一下，这是默认值。如果将 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: left 来“撤消”这个你不希望它应用到的块项子项。

【讨论】：

【解决方案4】：

当您将 h1 标记设置为 inline-block 时，它会部分地失去其块元素属性，因此宽度仅限于它所拥有的内容。这就是 text-align: center 不起作用的原因。

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

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

希望这对您正在寻找的内容有所帮助。

【讨论】：