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!

to horizontally center a block element with a defined width, add `margin-left: auto; margin-right: auto;` https://codepen.io/anon/pen/GmLyzX — Michael Coker, May 26 '17 at 15:27
@JamesDouglas that's assuming the vertical margins should be `0`, and in most of those cases `margin: auto` (like my codepen) is the shortest. — Michael Coker, May 26 '17 at 15:56

James Douglas · Accepted Answer · 2017-05-26T15:42:26.287

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

edited May 26 '17 at 15:42

answered May 26 '17 at 15:30

James Douglas

2,948
2
18
38

Thank you!!!! Yeah, I had two #borderimg and was trying to simplify the code for my question but I missed the 1/2! Also I was confused why "margine: 0 auto;" wasn't working but I figured it out haha! – bov25 May 26 '17 at 15:45

score -2 · Answer 2 · answered May 26 '17 at 15:30

-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

answered May 26 '17 at 15:30

Nexios

1

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

2 Answers2