2016-01-03 1 views
8

Come posso centrare orizzontalmente e verticalmente un testo? Non voglio usare la posizione assoluta perché ci provo e l'altra div peggiora. C'è un altro modo per farlo?centro h1 al centro dello schermo

div { 
 
    height: 400px; 
 
    width: 800px; 
 
    background: red; 
 
}
<div> 
 
    <h1>This is title</h1> 
 
</div> 
 

+0

Vuoi la 'h1' centrato all'interno del' div' o il 'div' centrato all'interno della finestra/schermo? Si prega di chiarire, –

risposta

6

è possibile utilizzare il display flessibile permette un contesto flessibile per tutti i suoi figli diretti, e con la direzione flex stabilisce il principale asse, definendo così la direzione di articoli flex sono messi in flessione contenitore

div{ 
    height: 400px; 
    width: 800px; 
    background: red; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    text-align: center; 
} 
+0

Eventualmente OP non ha bisogno di supportare Internet Explorer. –

+0

IE 10/11 va bene con la flexbox. –

1

solo fare questo, che funziona su tutti i browser:

div{ 
    height: 400px; 
    width: 800px; 
    background: red; 
    line-height: 400px; 
    text-align: center; 
} 

La proprietà line-height specifica l'altezza della linea (che lo centra verticalmente) e lo text-align:center lo posiziona direttamente nel centro in senso orizzontale.

+0

funziona anche per le immersioni? perché ho messo questo nel mio sito Web non ha funzionato – Dina

+1

@Dina div sono elementi di blocco, quindi no. Se vuoi che funzioni su un div, imposta lo stile div su 'display: inline'. Dovresti usare 'span' per il testo in linea. – Kris

0

.container { 
 
    display: table; 
 
} 
 
.centered { 
 
    display: table-cell; 
 
     height: 400px; 
 
     width: 800px; 
 
     background: red; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    }
<div class="container"> 
 
<div class="centered"> 
 
    <h1>This is title</h1> 
 
</div> 
 
</div>

Problemi correlati