CODEWITHSUNDEEP
htmlcss
Exeli Baide
Exeli Baide

Reputation: 11

Section Underline (hr)

I created an image and I wanted to use that as an hr for a page. When it's uploaded it is justified all the way to the left. I want it to be centered, under the heading. This is my css code: 

.section-underline {
     height: 35px !important;
     display: block;
     background-image:url("http://s18.postimg.org/rhqgsx8bp/underline.png") !important;
     background-repeat: no-repeat;
     border: 0;
}

This is a link to the page I'm working on: http://fortunabakery.getbento.com/

and a screenshot: underline and header

Upvotes: 1

Views: 232

Answers (2)

Alan H.
Alan H.

Reputation: 16598

Sure, set an explicit width and then apply margin-left: auto; margin-right: auto; and it will be centered!

In your case, that means:

.section-underline {
  width: 133px;
  margin-left: auto;
  margin-right: auto;
}

Example of changes showing success

Upvotes: 1

IndieRok
IndieRok

Reputation: 1788

in your CSS, use background-position: center center

Upvotes: 0

Related Questions