Question

我需要制作h1标签中心，还需要围绕它制作边框。为了防止占用更多宽度，我提供了display: inline-block，但标签后来没有响应text-align: center。

＆＃13;

h1 {
  text-align: center;
  border: 1px solid;
  display: inline-block;
}

＆＃13;

<div class="container">
  <h1>This is the Title</h1>
</div>

＆＃13;

Answer 1

您可以在标题上使用display: table。这将使标题具有取决于其内容的宽度，同时它仍将是块级元素。您可以使用margin: 0 auto属性将其居中。

＆＃13;

.heading {
  border: 1px solid black;
  display: table;
  margin: 0 auto;
  padding: 5px;
}

＆＃13;

<h1 class="heading">Heading 1</h1>

＆＃13;

Answer 2

将以下内容放在父标记上，而不是netstat -antp | grep 9300 tcp6 0 0 10.10.10.2:9300 :::* LISTEN 19768/java标记

h1

Answer 3

这将是您的HTML。

<div class="heading">
 <h1>My Heading</h1>
</div>

这将进入CSS

.heading {
  text-align: center;
}

.heading h1 {
  border: 1px solid black; 
  display: inline-block;
}

Answer 4

您可以按照@gavgrif说明操作。

<div class="container">
  <h1><span>Hello</span></h1>
</div>  

h1 {
text-align: center;
}

span {
border: 1px solid #000;
padding: 5px 10px;
}

Answer 5

您可以使用position: absolute;和transform

.heading {
    border: 1px solid black;
    padding: 5px;
    transform: translate(-50%, 0%);
    position: absolute;
    left: 50%;
    top: 0;
}

<h1 class="heading">Heading 1</h1>

Answer 6

我同意@ j10i2 - .container {text-align：center;}，但另一种方法是将内容置于h1中心。 h1是块级元素 - 因此在其中插入一个span并将文本放在其中。现在应用text-align：center将允许跨度在h1内居中。

更新 - 我只是注意到你想要一个围绕居中内容的边框 - 这很容易 - 将boder应用到已在h1中居的跨度。

h1 {
text-align:center;
}

h1 span {
 border: solid 1px #333;
 padding:5px 15px;
}

<h1><span>Heading 1</span></h1>

Answer 7

如果您使用的是bootstrap，则可以使用 文本中心

类

这是我可以从您的查询中理解的示例

<强> HTML：

<div class="head">
  <h1>Game Over</h1>
</div>

<强> CSS

.head{width:100%;float:left;margin:0 auto;text-align:center;}
 h1{border:1px solid red;text-align:center;position:relative;}
 h1:after{position:absolute;content:"";top:0;width:200px;height:38px;border:1p    x solid green;left:50%;transform:translate(-50%, 0);}

这是fiddle

如何使h1标签以其实际宽度居中

7 个答案: