Question

我想保持内容居中并首先使用多余的空间
我尝试使用百分比宽度，这可以帮助我居中，但空格始终存在

实现它的理想方法是什么？我希望最终结果像这样Oapletwo.com

.wrapper {
  width: 1140px;
  margin: auto;
  border-left: 1.5px solid rgba(255, 0, 0, 0.11);
  border-right: 1.5px solid rgba(255, 0, 0, 0.11);
}

h1 {
  width: fit-content;
  margin: auto;
  text-transform: uppercase;
}

<div class="wrapper">
  <div class="brand">
    <h1>PaymoNeer</h1>
  </div>
</div>

Answer 1

您可以将text-align: center;的div使用.brands

.wrapper {
  width: 1140px;
  margin: auto;
  border-left: 1.5px solid rgba(255, 0, 0, 0.11);
  border-right: 1.5px solid rgba(255, 0, 0, 0.11);
}

.brand {
  text-align: center;
}

h1 {
  margin: auto;
  text-transform: uppercase;
}

<div class="wrapper">
  <div class="brand">
    <h1>PaymoNeer</h1>
  </div>
</div>

Answer 2

使用text-align:center;并调整内容的填充

Answer 3

只需在.wrapper元素上使用text-align: center并在.brand div上使用display: inline-block和margin: 0 auto来保持居中。

.wrapper {
 text-align: center;
  border-left: 1.5px solid rgba(255, 0, 0, 0.11);
  border-right: 1.5px solid rgba(255, 0, 0, 0.11);
}

.brand {
  display: inline-block;
  margin: 0 auto;

}

h1 {
  text-transform: uppercase;
}

<div class="wrapper">
  <div class="brand">
    <h1>PaymoNeer</h1>
  </div>
</div>

如何在内容保持居中状态之前缩小间距

3 个答案: