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

Question

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

HTML文件

CSS文件

结果

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

Answer 1

您需要将h1的父级设置为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;
}