Center a vertical span within an a element - html

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"><span>first</span>
</div>
<div class="panel"><span>second</span>
</div>
<div class="panel"><span>third</span>
</div>
<div class="panel"><span>fourth</span>
</div>
<div class="panel"><span>fifth</span>
</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"><span>first</span>
</div>
<div class="panel"><span>second</span>
</div>
<div class="panel"><span>third</span>
</div>
<div class="panel"><span>fourth</span>
</div>
<div class="panel"><span>fifth</span>
</div>
</div>
http://codepen.io/gc-nomade/pen/obBYyY

Answer 2

Do the following:
.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 your jfiddle
You may need a small adjustment at tiny smartphones with a media query, but other than that it works
Add this to the 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 f you want center the text vertically use the below property below the text-align: center in .panel a span make the text in corner center of a panel
.panel a span {
text-align: center;
}
and if you want center text in the middle of the panel not in corner
.panel a span {
text-align: center;
margin-left: -260px;
}