Search code examples
htmlcsscenteringepub

How to centralize elements that use text-align left

Is there any way to center elements that use text-align: left and doesn't involve display: inline-block?

I'm creating an epub and when centering the paragraphs through div and inline-block it breaks the page layout (see links with example).

HTML

  <h2 class="numero_hino"><a href="indice.xhtml"></a></h2>

  <h3 class="titulo_hino sigil_not_in_toc"></h3>

  <div class="centralizar-div">
    <div class="estrofe-div">
      <p class="estrofe"></p>

      <p class="estrofe"></p>

      <p class="estrofe"></p>
    </div>
  </div>

CSS

div.centralizar-div {
    text-align: center;
}

div.estrofe-div {
    display: inline-block;
    text-align: left;
}

How it should be: Book in continuous mode (scroll down)

How it is: Book in single page mode

If anyone can help me :D

Solution

  • Because of people's comments, I was researching until I found a way to solve the problem through flex items. Follow the code

    div.centralizar-div {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}