[JSWolf]

Originally Posted by RbnJrg

If you don't want to use a table, there's the option (and in this case, I'd say it's preferable) of a two-column layout based on the "display: inline-block" property. A quick solution could be the following:

XHTML Code:

  <div class="wrapper">
    <div class="column">
      <p>☊</p>
      <p>Y'AI 'NG'NGAH,</p>
      <p><i>YOG-SOTHOTH</i></p>
      <p>H'EE—L'GEB</p>
      <p>F'AI THRODOG</p>
      <p><i>UAAAH</i></p>
    </div>

    <div class="column">
      <p>☋</p>
      <p>OGTHROD AI'F</p>
      <p>GEB'L—EE'H</p>
      <p><i>YOG-SOTHOTH</i></p>
      <p>'NGAH'NG AI'Y</p>
      <p><i>ZHRO</i></p>
    </div>
  </div>

CSS Code:

  .wrapper {
    text-align: center;
    width: 100%;
  }

  .column {
    display: inline-block;
    width: 40%;
    text-align: center;
    vertical-align: top;
  }

  .column p {
    margin: 0;
    text-indent: 0;
  }

Of course, the above code can be improved since I didn't take optimization into account here, but rather to give the idea of ​​how the "display: inline-block" property (the basis of the entire design) should be used to achieve the desired effect.

When you have a text-align: center;, you should always have text-indent: 0; to go with it.

The code works perfectly well as ePub2.