Center a vertical span within an a element

Question

I have a layout that looks sort of like a bookshelf, see my jsfiddle example. The bookshelf is responsive so no fixed widths. The issue I'm faced with is that I cannot center the text within the panels, "horizontally" within the books sides. It's extra tricky since the text is transformed to be displayed vertically. Does anyone have any ideas of 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 easy options, with either display:flex or table :

---

display:table example:

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