居中特定寬度的邊框圖像元素（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）

回答

相關問題