[RbnJrg]

Originally Posted by crutledge

The folloeing is one stanza of a poem,

[CODE]
<div class="poem">
<div class="stanza">
<span class="i0">Mi memoria en ti se ocupa</span><br />
<span class="i0">No te olvida un solo instante,</span><br />
<span class="i0">Y mi mente delirante En ti piensa,</span><br />
<span class="i0">en ti piensa sin cesar.</span><br />
</div>
</div>
CODE]

I would like to center the poem on the page without losing the foemat. Nothing I have tried has nas workeed.


advice

Hi crutledge;

What you want, it can be done, at least in the modern .kf8 format. In your .css stylesheet write:

h2 {
   text-indent: 0;
   text-align: center;
   font-size: 1.4em;
   font-weight: bold;
   margin: 1em 0 2em;
}

.poem {
    display: table;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.stanza {
    display: table-cell;
    vertical-align: top;
}

And in your .html file write:

<h2>Título del Poema</h2>

  <div class="poem">
    <div class="stanza">
      Mi memoria en ti se ocupa<br />
      No te olvida un solo instante,<br />
      Y mi mente delirante En ti piensa,<br />
      en ti piensa sin cesar.
    </div>
  </div>

Below you can see screenshots of my kindle with different font-sizes and both, in portraid and landscape mode. As you can see, the body of the poem always remains centered. But since this technique makes use of the properties display: table and margin-left: auto, margin-right: auto, it doesn't work in ADE.

Regards
Rubén