CODEWITHSUNDEEP
css
bdesham
bdesham

Reputation: 16089

Is it possible to horizontally center generated content?

I would like to use CSS to change the appearance of the <hr> elements on a page: instead of a horizontal line, I'd like each one to appear as a set of three asterisks. I can accomplish that using something like this:

hr {
    border: none;
    margin: 3.0rem auto;
    width: 5rem;
}

hr:before {
    content: "***";
    letter-spacing: 1rem;
}

(Fiddle here.)

The problem is getting this generated content to appear horizontally centered. I can get it more-or-less centered by tweaking the "width" property of the <hr>, but this feels hacky and inflexible. Is there a way to tell the browser that this content should be centered?

Upvotes: 1

Views: 107

Answers (2)

j08691
j08691

Reputation: 207861

Remove the width property and add text-align:center; to the hr rule:

hr {
    border: none;
    margin: 2.0rem auto;
    text-align:center;
}

jsFiddle example

Upvotes: 3

Chamika Sandamal
Chamika Sandamal

Reputation: 24302

How about this,

hr {
    border: none;
    margin: 2.0rem auto;
    text-align:center;
}

hr:before {
    content: "***";
    letter-spacing: 1rem;
}

http://jsfiddle.net/rMNSJ/2/

Upvotes: 3

Related Questions