将特定宽度的边框图像元素居中 (CSS)

Question

我是 CSS 的新手，只是随便玩玩。我在这里搜索了类似的问题，但找不到我要找的东西。

我正在查看 W3 上的 this tutorial，我想添加一个边框。这是我当前的代码：

<style>
    .center {
        text-align: center;
     }

    #borderimg2 { 
    border: 10px solid transparent;
    padding: 10px;
    border-image: url(https://www.w3schools.com/cssref/border.png) 35 stretch;
    }

</style>

 <div class="center">
 <p id="borderimg1" style="width: 200px"><font size="5"><b>Guides</b></font></p>
 </div>

问题是，当我添加 width 元素时，它会将所有内容（带有内部文本的边框）拉到左侧。我想要的是一切都以边框图像完美居中，而不是拉伸整个页面宽度。

如果这没有意义，请告诉我；我可以添加图片。

感谢任何帮助！另外我假设我的代码有点杂乱无章，所以任何关于组织或排序的一般提示都会有所帮助！谢谢！

Answer 1

而不是

style="width: 200px"

尝试使用 padding-left 和 padding-right

如果您不知道填充或边距是什么，请单击this

Answer 2

您在 CSS 中输入的 id 有误。除此之外，在 #borderimg1 上使用 margin: 0 auto; 就可以了！

.center {
  text-align: center;
}
#borderimg1 { 
  margin: 0 auto;
  border: 10px solid transparent;
  padding: 10px;
  border-image: url('https://www.w3schools.com/cssref/border.png') 35 stretch;
}

<div class="center">
  <p id="borderimg1" style="width: 200px">
    <font size="5">
      <b>Guides</b>
    </font>
  </p>
</div>

CodePen

将特定宽度的边框图像元素居中 (CSS)

Center a border image element of a specific width (CSS)

html

css

border

border-image