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

Question

I'm really new to CSS and just playing around. I searched in similar questions here but couldn't find quite what I was looking for.

I was looking at this tutorial on W3 and I want to add a border. Here is my current code:

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

The problem is that when I add the width element, it pulls everything (the border with the text inside) over to the left side. What I want is everything centered perfectly with the borderimage not stretching the entire width of the page.

Let me know if this doesn't make sense; I can add pictures.

Any help is appreciated! Also I'm assuming my code is sort of unorganized, so any general tips on organization or ordering would help! Thanks!

Answer 1

You've got the id wrong in CSS. Apart from that, use margin: 0 auto; on #borderimg1 and there you go!

 .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

Answer 2

Instead of

style="width: 200px"

try using padding- left & padding-right

If you do not know what padding or margin is, then click this