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: To Hull And Back title right justified

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).

TitleNotCentredKindle.jpg

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

TitleCentredKindle.jpg

Figure 3: Title To Hull And Back in Kindle Previewer showing as centred

Angela Googh rhymes with scrooge