Quote:
Originally Posted by orange!
This isn't really a Sigil question--if there's a better place to ask generic CSS questions, please let me know.
|
Moderator Notice
Moved to the ePub section. Could also be in Workshop, but since you are using Sigil, I guess you are creating an ePub.
Quote:
Code:
hr.sep
{
width: 72px;
text-align: center;
}
Looks fine in Book Preview, but on the device, the <hr> is left-aligned.
|
In fact, it isn't. You just have to understand what is happening here:
1. The <hr> element is just a block element (like <p> or <div>) with a default border, that we see as a "rule".
2. The "text-align" property does not control the position of an element itself, but rather of its content. Since <hr> has no content, there's no use in specifying text-align.
And of course, when you force the width of a block element (like <hr>) to less than 100%, it will typically stay at the left. You could think of specifying "text-aling:center" in the container element (probably <body>), but I'm afraid that will only affect inline elements, not block ones. Or you try with "margin:0 auto", which should ensure that left and right margins in <hr> are equal (thus centering the element), unfortunatelly Adobe-based readers chose to interpret the "auto" value as "0", which is allowed by the spec. The Book view uses a different renderer that obeys auto margins, and probably has that value as default.
So, the solution is as Rubén said, specify at least margin-left. Why 44%, just because you set 12% width, and (100-12)/2 = 44.