Centred But Not Centred
On one of my projects, in spite of setting the style in the style sheet, a title would not centre properly. The html for the title was
<p class="title" id="title1">To Hull And Back</p>
and the style in the style sheet was coded as
p.title {
font-size: 275%;
padding-bottom: 2em;
padding-top: 1em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
Yet the title, TO HULL AND BACK, seems right justified, as can be seen in figure 1. This image was taken from the Apple ebook application, Books.
Figure 1: Half title page of To Hull And Back in Books showing the title is not centred
A colleague mentioned that adding a carriage return before the line sometimes resolves this when it happens in Word. I did the equivalent in html
<p class="title" id="title1"><br/>To Hull And Back</p>
The problem was resolved, or so we thought. It looked fine in Books, but in Kindle Previewer 3 it still looked right justified (figure 2).
Figure 2: Half title page of To Hull And Back in Kindle Previewer showing the title is not centred
Since inserting a break before the title worked in Books, I wondered if the padding in the style had anything to do with it. On a whim I replaced the padding with margins.
p.title {
font-size: 275%;
margin-bottom: 2em;
margin-top: 1em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
Eureka. It worked (figure 3). I don't know why, but when I have that answer, I will update this article and explain.
Happy coding. #epub
Figure 3: Title To Hull And Back in Kindle Previewer showing as centred
