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

你在CSS中犯了id。除此之外，在margin: 0 auto;上使用#borderimg1然后你就去了！

＆＃13;

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

＆＃13;

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

＆＃13;

CodePen

Answer 2

而不是

style =＆＃34; width：200px＆＃34;

尝试使用padding-left＆amp;填充右

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

居中特定宽度的边框图像元素（CSS）

2 个答案: