0

我对 CSS 很陌生，只是在玩。我在这里搜索了类似的问题，但找不到我想要的东西。

我在看这个关于 W3 的教程，我想添加一个边框。这是我当前的代码：

<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>

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

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

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

4

2 回答 2

1

您在 CSS 中的 id 错误。除此之外，继续使用margin: 0 auto;就#borderimg1可以了！

.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>

代码笔

于 2017-05-26T15:30:30.370 回答
-2

代替

样式=“宽度：200px”

尝试使用 padding-left & padding-right

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

于 2017-05-26T15:30:15.157 回答