Center vertical spacing inside an element

Question

I have a layout that looks like a bookshelf, see my jsfiddle example . The bookshelf reacts so that there is no fixed width. The problem I am facing is that I cannot center the text inside the panels “horizontally” within the sides of the book. This is very difficult because the text is converted to display vertically. Does anyone have any ideas on how to make this work?

HTML

<div class="panel"> <a href="#first"> <span>first</span> </a> </div> 

CSS

 .panel { float: left; height: 100%; width: 15%; margin-right: 5%; } .panel a { text-align: right; background: green; padding: 20px 10px; height: 100%; display: block; white-space: nowrap; color: white; float: left; width: 100%; text-decoration:none; } .panel a span { white-space: nowrap; color: white; text-transform: lowercase; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transform-origin: top right; display: block; width: 300px; margin-left: -300px; letter-spacing: 1px; font-size: 20px; } 

Answer 1

you have 2 simple options: display : flex or table :

---

display: example table:

 body, html, .panel-wrapper { height: 100%; width: 100%; } .panel-wrapper { display: table; border-collape: collapse; table-layout: fixed; background: white; } .panel { display: table-cell; height: 100%; width: 20%;/* you have five here*/ } .panel a { display: block; text-align: center; background: green; padding: 20px 10px; box-sizing:border-box;/*includes padding and borders */ height: 100%; width: 75%;/* each is 15% width */ text-decoration: none; white-space: nowrap; } .panel a:before { content: ''; height: 100%; display: inline-block; vertical-align: middle;/*inline content will vertical-align middle aside it */ } .panel a span { display: inline-block;/* triggers transform*/ color: white; text-transform: lowercase; transform: rotate(-90deg); letter-spacing: 1px; font-size: 20px; vertical-align: middle; } 

 <div class="panel-wrapper"> <div class="panel"><a href="#first"><span>first</span></a> </div> <div class="panel"><a href="#second"><span>second</span></a> </div> <div class="panel"><a href="#third"><span>third</span></a> </div> <div class="panel"><a href="#fourth"><span>fourth</span></a> </div> <div class="panel"><a href="#fifth"><span>fifth</span></a> </div> </div> 

http://codepen.io/gc-nomade/pen/JGEbLX

---

or flex:

 body, html, .panel-wrapper { height: 100%; width: 100%; margin: 0; } .panel { float: left; height: 100%; width: 15%; margin-right: 5%; } .panel a { text-align: right; background: green; padding: 20px 10px; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; ; white-space: nowrap; color: white; text-decoration: none; } .panel a span { white-space: nowrap; color: white; transform: rotate(-90deg); letter-spacing: 1px; font-size: 20px; } 

 <div class="panel-wrapper"> <div class="panel"><a href="#first"><span>first</span></a> </div> <div class="panel"><a href="#second"><span>second</span></a> </div> <div class="panel"><a href="#third"><span>third</span></a> </div> <div class="panel"><a href="#fourth"><span>fourth</span></a> </div> <div class="panel"><a href="#fifth"><span>fifth</span></a> </div> </div> 

http://codepen.io/gc-nomade/pen/obBYyY

Answer 2

Follow these steps:

 .panel a span { white-space: nowrap; color: white; text-transform: lowercase; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transform-origin: top right; display: block; width: 300px; margin-left: -300px; letter-spacing: 1px; font-size: 20px; position:relative; left: 45%; } 

See my demo here or jfiddle

You may need a little tweak on tiny smartphones with media query, but it also works.

Add this to responsive css:

 @media (max-width: 560px){ .panel a span { left: 25%; } } 

Answer 3

Add these lines to your code:

 .panel a{ position:relative; } .panel a span { position:absolute; left:40%; /* top:50%; */ } 

Here is the fiddle

Answer 4

I want the text to be vertically used lower than text-align: center in .panel a span to make the text in the corner center of the panel

 .panel a span { text-align: center; } 

and if you want the central text to be in the middle of the panel, not in the corner

 .panel a span { text-align: center; margin-left: -260px; }