[RbnJrg]

Originally Posted by RbnJrg

There are easier ways to do what you want But before giving you a "solution", I need to know if you are working on epub2 or epub3?

Well, here you have a solution for epub2 (with epub3 the code is simpler yet). you can get the layout you are looking for with the following code:

1. In your .xhtml sheet, write this:

  <div class="center">
    <p class="greyBox">99</p>
  </div>

  <h1 class="👻">C* H* A* P* T* E* R</h1>

  <h2>ZOE ALAKIS</h2>

2. In your .css stylesheet write:

h1 {
   text-align: center;
   color: white;
   background: black;
   font-family: sans-serif;
   font-size: 1.1em;
   margin: -7em 0 0;
}

h2 {
   text-align: center;   
   font-size: 1.4em;
   margin: 0;
}

.center {
   position: relative;
   z-index: -1;
   height: 8.4em;
   text-align: center;
}

.greyBox {
   display: inline-block;
   width: 2.4em;
   height: 100%;
   line-height: 2.4em; 
   margin-top: 0;
   color: white;
   background: #999;
   font-size: 3.5em;
   font-weight: bold;
   font-family: sans-serif;
   text-align: center;
}

.👻 { /* Don't change the name of this class */
   margin-bottom: 5.6em; /* 7 - 1.4 = 5.6 */
}

To center the chapter number vertically, use the property "line-height". Its value must be equal to the height of the square. And since I employed as height 8.4em and the font-size is 3.5em, then the line-height is 8.4/3.5=2.4.
Don't change the name of the class ".👻" (it's a hack for ADE 2). Epubcheck will give you an error message but don't pay attention.
Here you can watch how it looks under ADE and webkit:



Below you can check the respective epub.

Regards.