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

我真的很新来CSS，只是玩耍。我在这里搜索了类似的问题，但找不到我正在寻找的东西。居中特定宽度的边框图像元素（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>

的问题是，当我添加宽度的元素，它在拉向左侧一切（带内的文本边框）。我想要的是一切与borderimage完美集中，不会拉伸整个页面的宽度。

让我知道这是否没有道理;我可以添加图片。

任何帮助表示赞赏！此外，我假设我的代码是无组织的，所以关于组织或订购的任何一般提示都会有所帮助！谢谢！

来源

2017-05-26 bov25

水平居中具有限定宽度的块元素中，添加'保证金左：汽车; margin-right：auto;'https://codepen.io/anon/pen/GmLyzX –

@MichaelCoker甚至更好，'margin：0 auto;' –

@JamesDouglas假设垂直边界应该是'0'，并且在大多数情况下'margin：auto（像我的codepen）是最短的。 –

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

来源

2017-05-26 15:30:30

谢谢!!!!是的，我有两个#borderimg，并试图简化我的问题的代码，但我错过了1/2！另外我很困惑为什么“margine：0 auto”没有工作，但我知道了哈哈！ – bov25

-2

代替

风格= “宽度：200像素”

尝试使用padding-左&填充右

如果你不知道什么是填充或利润率，那么点击this

来源

2017-05-26 15:30:15 Nexios

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

回答

相关问题