View Full Version : How do I centre a horizontal rule?


AlexBell
08-08-2010, 07:41 AM
I want to use horizontal rules as separators between subsections of chapters. It is easy to set them to 50% in the CSS, using

hr.half { height: 2px; color: black;
background-color: black; width: 50%;
}

and they work well and are centred when reading the book in HTML.

But when I read the book on my Cybook reader the horizontal rule is not centred; it is aligned left.

Is there a way to centre them in ePub? What do I need to add to the above segment of the stylesheet? Or, like small-caps, is this one of the things ADE cannot handle?

Regards, Alex

charleski
08-08-2010, 08:19 PM
margin-left: 25%

This is an old bug in ADE, would be interesting to know if they bothered to fix it in the version used for recent models like the PRS900.

sherman
08-08-2010, 11:21 PM
margin-left: 25% works if your horizontal rule has a width of 50%.

An alternate way is to set both margins to an identical value and do not specify a width.

eg: margin-left:30%; margin-right:30% would give a centered <hr> with a width of 40%.

AlexBell
08-09-2010, 05:20 AM
Many thanks to you both. I was so fixed on getting something like align: center; to work that I never thought of setting the margin.

Regards, Alex

Jellby
08-09-2010, 06:37 AM
The "proper" way would be "margin: 0 auto", which should work for any width. But ADE does not support "auto", so you have to compute the margins yourself.

Dark123
08-09-2010, 10:54 PM
Have you tried to use this:

You could use <hr align="center" /> instead of using the CSS.

AlexBell
08-10-2010, 05:21 AM
Have you tried to use this:

You could use <hr align="center" /> instead of using the CSS.

Thanks, but I think you'll find that align="center" is not acceptable in XHTML 1.1, which is the basis for ePubs.

Regards, Alex

Nathanael
09-07-2010, 11:10 PM
The "proper" way would be "margin: 0 auto", which should work for any width. But ADE does not support "auto", so you have to compute the margins yourself.

The proper way to center an <hr /> should be to just leave it alone, as align: center is supposed to be the default. But alas, there are far too many broken viewers out there, with ADE being one of the usual suspects.

--Nathanael

Req13
10-04-2010, 04:03 AM
Setting the left and right margins works in the calibre viewer, but it is still aligned left when I view the epub in the Sony Reader Library. I don't have my prs-600 yet, but is that how it will show up on it?

ldolse
10-04-2010, 05:39 AM
I played around on this a while back on my 505 and came up with this:

html:
<div class="ruleclass">
<hr />
</div>

Stylesheet:
.ruleclass {
margin-left: 5em;
margin-right: 5em;
}
hr {
height: 3px;
background:#505050;
}

The hr styles are optional, the centering was accomplished by using the div. I'm sure there are alternate ways to do it, but I do recall arriving at that solution through trial and error, not sure what the specific failures were.

Req13
10-04-2010, 11:29 PM
Thank you very much Idolse. This has been bugging me for a long time. I was able to tweak it to my specifications.

JSWolf
10-04-2010, 11:35 PM
Setting the left and right margins works in the calibre viewer, but it is still aligned left when I view the epub in the Sony Reader Library. I don't have my prs-600 yet, but is that how it will show up on it?

The version of ADE on the 600 does not full justify. You'd need to purchase a 650 to get ePub that allows full justification. Plus, the 650 has the new Pearl screen, is faster, and does not have the touch layer to bother you. So if you can, cancel the 600 and get a 650.

Req13
10-06-2010, 04:09 AM
Thanks for the info. I wish I could get the 650, but I'm supposed to be receiving the 600 as a prize from Club Bing.