How can I make CSS text like the one showed in the picture?

Danilo016 0
Viewed 47

I'm making an ebook with Calibre, and the pages are based off xhtml and css files. I want the page to maintain the same distance between paragraphs no matter what the size of the page is, but using padding as I have already tried doesn't track the size of the page and therefore messes up the aspect ratio, making some text overflow in the next page.

Calibre view page I'm trying to replicate

@charset "utf-8";
/* Styles for A Manual Of Occultism */
/*** IMPORT CSS FILES ***/
/*** center in page***/
.center {
  text-align: center;
  vertical-align: center;
  padding-top: 50%;
  padding-bottom: 50%;
}
#main-title {
  text-align: center;
}
#sub-title {
  text-align: center;
}
#sub01 {
  padding-top: 2%;
}
#sub03 {
  padding-top: 10%;
}

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>A Manual Of Occultism</title>
  <link href="s0_style.css" rel="stylesheet" type="text/css"/>
</head>

<body>

  <div id="wrapper">

    <div class="title" id="main-title">

      <h1>A MANUAL OF<br/>
OCCULTISM</h1>

    </div>

    <div class="text" id="sub-title">

      <div id="sub01">

        <p>BY <br/> “SEPHARIAL”</p>

      </div>

      <div id="sub02">

        <p>AUTHOR OF <br/> “THE MANUAL OF ASTROLOGY”, “ KABALISTIC ASTROLOGY”, <br/> “THE KABALA OF NUMBERS”, ETC.</p>

      </div>

      <div id="sub03">

        <p>LONDON <br/> WILLIAM RIDER &amp; SON, Ltd. <br/> 1914</p>

      </div>

    </div>

  </div>

</body>

</html>
css
1 Answers

I think you can use flexbox to achieve this, i have also removed unnecessary tags. You can play with justify-content and height of #wrapper to have exactly the effect that you want

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>A Manual Of Occultism</title>
        <link href="s0_style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <div id="wrapper">
                <h1>
                    A MANUAL OF<br />
                    OCCULTISM
                </h1>
  

            <div class="text" id="sub-title">
                    <p>
                        BY <br />
                        “SEPHARIAL”
                    </p>
                    <p>
                        AUTHOR OF <br />
                        “THE MANUAL OF ASTROLOGY”, “ KABALISTIC ASTROLOGY”,
                        <br />
                        “THE KABALA OF NUMBERS”, ETC.
                    </p>
            </div>

              <p>
                  LONDON <br />
                  WILLIAM RIDER &amp; SON, Ltd. <br />
                  1914
              </p>
        </div>
    </body>
</html>

body{
    height: 100%;
}


#wrapper{
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    
}

You can play with justify-content and height of #wrapper to have exactly the effect that you want

G.Pagliara0
Related