Question

我正在尝试使我的文字以Costum宽度居中。设置宽度或最大宽度会将线的位置恢复到左侧。我正在这样做：

我需要为它们中的每一个设置自定义宽度，在一行中分别包含<h6>和<a>，中间的所有内容（包括边框）。

Answer 1

您需要将h1的 parent 设置为text-align:center

body {
  text-align: center;
}

h1 {
  background: lightgreen;
  font-family: sans-serif;
  width: 200px;
  display: inline-block;
}

<h1>Some text</h1>

Answer 2

/*without display: inline-block;*/
.h1{
  text-align: center !important;
  font-family: sans-serif;
  width: 200px;
  margin: auto;
}

/*with display: inline-block;*/
.with_div{
  text-align: center;
}
.with_div h1{
  text-align: center !important;
  font-family: sans-serif;
  width: 200px;
  display: inline-block;
}

<!--  without display: inline-block; -->
<h1 class="h1">hello</h1>


<!-- with display: inline-block -->
<div class="with_div">
  <h1>hello</h1>
</div>

Answer 3

无论下面的CSS是否存在于div中，您都可以实现。与其他一些相似，但是它还包含margin：auto;即使将h1显示为内联或内联块，它也将居中。

body{
  text-align: center;
}
h1{
  text-align: center !important;
  font-family: sans-serif;
  width: 200px;
  margin: auto;
  display: inline-block;
}

Answer 4

没有任何包装div。 CSS flex

h1{
  display:flex;
  justify-content:center;
}

文本align：center在宽度和显示方面效果不佳：inline-block

4 个答案: