Centrare una campata verticale all'interno di un elemento

Question

Ho un layout che sembra un po 'come una libreria, see my jsfiddle example. Lo scaffale è reattivo, quindi non ci sono larghezze fisse. Il problema che ho di fronte è che non riesco a centrare il testo all'interno dei pannelli, "orizzontalmente" all'interno dei lati del libro. È più complicato dal momento che il testo viene trasformato per essere visualizzato verticalmente. Qualcuno ha qualche idea su come fare questo lavoro?

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

procedere come segue:

.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%; 
} 

Vedere il mio demo here o il vostro jfiddle

Potrebbe essere necessario un piccolo aggiustamento a piccoli smartphone con una media query, ma a parte questo funziona

Aggiungere questo al css reattivo:

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

Answer 2

aggiungere queste righe al codice:

.panel a{ 
     position:relative; 
    } 

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

Here is the fiddle

Answer 3

avete 2 semplici opzioni, con sia display: flex o table:

---

visualizzazione: Esempio tabella:

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

---

o 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 4

I f si vuole centrare il testo usa verticalmente la proprietà al di sotto al di sotto del text-align: center nel .panel a span rendere il testo nel centro angolo di un pannello

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

e se si desidera il testo centrale nel mezzo del pa nel non nell'angolo

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