View Single Post
Old 06-29-2013, 12:57 PM   #2
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,527
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by orange! View Post
This isn't really a Sigil question--if there's a better place to ask generic CSS questions, please let me know.

The book I'm working on uses a short horizontal line to separate sections within a chapter. So my inclination was to use this in my html:

Code:
<hr class="sep" />
and this in my stylesheet:

Code:
hr.sep
{
width: 72px;
text-align: center;
}
Looks fine in Book Preview, but on the device, the <hr> is left-aligned.

My question: is there an industry-standard way to render a section separator like this?

Thanks in advance!
In devices based on ADE, the text-align property doesn't work for the <hr> tag. So, you must use a workaround to center the rule. First, work with percentages to fix the rule width (72px is about 12% of the device width); knowing that and that you want to center the rule, you need to establish a left margin of (100% - 12%) / 2 = 44%. Of that way, in your css stylesheet you should use the following code:

Code:
hr.sep
{
width: 12%;
margin-left: 44%;
}
After that you should have your rule centered in your device

Regards
Rubén
RbnJrg is offline   Reply With Quote