HTML CSS如何更改边框形状

Question

我正在设计一个网站，对于主标题，我希望它能说'＃34; Definitive Apps＆＃34;整个边界都有一个边界，甚至是整个文本的距离。

这是我用于边框的代码

#home-banner h1 {
   border-width: 5px;
   border-style: solid;
   text-align:center;
}

然而，这给出了这个结果：

然后我试图改变宽度，但这给了我这个结果：

#home-banner h1 {
   border-width: 5px;
   border-style: solid;
   width: 500px;
   text-align:center;
}

我希望页面中心的文字边界均匀。这可能吗？

Answer 1

如果您不想定义width，请使用display: table。

#home-banner h1 {
   border-width: 5px;
   border-style: solid;
   display: table;
   margin: auto;
   text-align:center;  
   padding: 0 10px;
}

<div id="home-banner">
  <h1>
    Heading 1
  </h1>
</div>

如果宽度是固定的（500px），只需在代码中添加margin: auto;即可。

#home-banner h1 {
   border-width: 5px;
   border-style: solid;
   width: 200px;
   margin: auto;
   text-align:center;  
   padding: 0 10px;
}

<div id="home-banner">
  <h1>
    Heading 1
  </h1>
</div>