Come centrare il testo verticalmente con css

Ho cercato di trovare come centrare il testo verticalmente, ma non riesco a trovare una risposta soddisfacente. La migliore risposta che ho trovato fino ad ora è this. Questo mi fa sembrare che mi permetta di centrare il testo verticalmente, ma se lo uso e aggiungo altro testo, viene esteso solo verso il basso e non viene ricentrato, come accade in orizzontale.Come centrare il testo verticalmente con css

Nota, sto cercando una soluzione solo CSS, quindi non javascript per favore. Nota, voglio poter aggiungere più righe di testo.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<style type="text/css"> 
    div#maindiv { 
     width: 810px; 
     height: 99px; 
     background-color: black; 
     margin: 0px; 
     padding: 0px; 
     color: white; 
     font-family: Sans-serif; 
     text-align: center; 
     display: table; 
    } 
    div#maindiv span { 
     font-size: 1.1em; 
    } 


    div#part1 { 
     width: 270px; 
     height: 99px; 
     background-color: #6DCAF2; 
     float: left; 
     vertical-align: middle; 
     position: relative; 
    } 

    div#horizon1 { 
     background-color: green; 
     height: 1px; 
     left: 0; 
     overflow: visible; 
     position: absolute; 
     text-align: center; 
     top: 50%; 
     visibility: visible; 
     width: 100%; 
    } 

    div#content1 { 
     background-color:green; 
     height:99px; 
     width: 270px; 
     position: absolute; 
     top: -50px; 
    } 

</style> 
<title>XHTML-Strict</title> 
</head> 
<div id="maindiv"> 
<body> 
    <div id="part1"> 
     <div id="horizon1"> 
      <div id="content1"> 
       <div id="bodytext1"> 
        <span> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dolor augue, faucibus quis sagittis 
        <span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Alla fine, voglio avere 3 blocchi, ognuno dei quali centra il testo nel mezzo. Questi testi sono modificati dai client in modo che devono essere in grado di estendersi su più righe. Attualmente il testo inizia nella parte superiore della scatola e va verso il basso, alla fine, voglio che il testo inizi in un punto in modo che il centro del corpo del testo sia posizionato al centro del riquadro.

La mia soluzione finale, Nota: l'allineamento verticale non funziona se si dispone di float: lasciato nello stesso div.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<style type="text/css"> 
    div#maindiv { 
     width: 810px; 
     height: 99px; 
     background-color: black; 
     margin: 0px; 
     padding: 0px; 
     color: white; 
     font-family: Sans-serif; 
    } 
    div#maindiv span { 
     font-size: 1.1em; 
    } 

    div.part { 
     width: 262px; 
     height: 99px; 
     padding: 0px; 
     margin: 0px; 
     padding: 4px; 
     border: 0px; 
     color: white; 
     text-align: center; 
     display: table-cell; 
     vertical-align: middle; 
    } 

    div.bgc1 { 
     background-color: #6DCAF2; 
    } 

    div.bgc2 { 
     background-color: #2A4B9A; 
    } 

    div.bgc3 { 
     background-color: #FF8A00; 
    } 


</style> 
<title>XHTML-Strict</title> 
</head> 
<div id="maindiv"> 
<body> 
    <div style="float: left;"> 
     <div class="part bgc1"> 
      <span> 
       Vegeta! What does the scouter say about his power level?! 
      </span> 
     </div> 
    </div> 
    <div style="float:left;"> 
     <div class="part bgc2"> 
      <span> 
       It's over NINE THOUSAAAAAAAAAND! 
      </span> 
     </div> 
    </div> 
    <div style="float:left;"> 
     <div class="part bgc3"> 
      <span> 
       What NINE THOUSAND? There is no way that can be right! 
      </span> 
     </div> 
    </div> 
</div> 
</body> 
</html>

fonte

2012-01-03 NomenNescio

potete inserire il codice corrente? la prima domanda è sempre: 'cosa vuoi inserire al centro del testo?' – ptriek

Ci sono vari metodi disponibili qui: http://www.vanseodesign.com/css/vertical-centering/ Se potessi condividere il codice che stai utilizzando, forse possiamo aiutarti con una soluzione specifica. –

l'altro modo css è di avere il testo in una cella di tabella; altrimenti dovrai usare js – mreq

Si potrebbe impostare il contenitore display:table-cell e aggiungere vertical-align:middle:

http://jsfiddle.net/ptriek/h5j7B/1

(Ma IE7 e al di sotto sarà non come questo ...)

fonte

2012-01-03 15:29:36 ptriek

Oltre a problemi pre-IE8, questo non funziona bene anche su cellulari e palmari. (oltre alle vittime di Safari-Browser, cioè.) Inoltre, non v-centra realmente il testo, v-centra il contenitore secondario che quindi contiene di nuovo del testo ... ma chi vuole iniziare a contare i piselli qui? ;) Ottima idea comunque ... –

È possibile utilizzare l'altezza della riga uguale a quella del contenitore principale.

ad es.

<div style="height:32px;> 
    <p style="line-height:32px;">Text</p> 
</div>

Si vorranno questi in un foglio css esterno.

Se sto capendo correttamente la tua domanda.

fonte

2012-01-03 15:18:52

Vuoi spiegare i voti negativi? Se sto spiegando qualcosa di sbagliato, non esitare a correggere. –

Non mi sono rivolto a valle, ma OP ha menzionato un problema durante l'aggiunta di più (leggi: testo multilinea) - e questo non funzionerà con la tua risposta ... – ptriek

Grazie per la risposta. –

<div style="height:50px;line-height:50px;"> 
    Text 
</div>

fonte

2012-01-03 15:20:52 Arrabi

È necessario contrassegnare il codice HTML come codice o non verrà visualizzato direttamente nella risposta SO. – scottheckel

Una risposta valida Sono d'accordo, ma c'è un problema: quando il testo inizia a avvolgere orizzontalmente, questo "si spezza" in qualcosa di brutto con un'altezza della linea esagerata. L'OP dovrebbe farci sapere: "di quanto testo" stiamo parlando. ;) –

di solito lo uso per pulsanti e div con una riga di testo. – Arrabi

Bene, ci sono diverse soluzioni.

Il metodo più semplice è

#centerme 
{ 
    // will center the text vertically, but looks bad with multiliners 
    line-height:20em; 
}

per Multi-liners, è necessario posizionare a-box-in-a-box

#parentbox 
{ 
    // we need the "parent" to have some kind of height 
    height:20em; 

    // the most important... position children "relative" to the parent 
    position:relative; 
} 

.childbox 
{ 
    position:absolute; 
    left:0; 
    top:50%; 
    margin-top:-5em; // this pulls the child back "up" to the vertical center 
}

Il problema qui è che la "altezza" della vostra il multi-liner deve essere conosciuto (o almeno indovinato) in modo che sia effettivamente centrato in verticale.

COSA che dovete sapere

Non c'è modo CSS puro di conoscere l'altezza di un elemento, che poi ci permettono di centrare verticalmente in modo "adattivo"!

Ciò significa che quando si modifica il testo, è necessario modificare anche il CSS per assicurarsi che tutto si adatti ancora.

Questo può essere fastidioso e questo è il motivo e il motivo per cui la maggior parte delle persone ricomincia a utilizzare javascript per aggirare questo fastidio CSS di "una funzionalità mancante". Alla fine, javascript rende tutto più facile a tutti noi (almeno in questo tipo di casi).

PIÙ

C'è un sacco di Q & A in merito a quello che sta succedendo in tutto il web e intorno a questo sito web.Nel caso in cui li siete persi, ecco alcuni:

e là sono molti di più; tutto ciò fornisce soluzioni individuali ai singoli casi. Quelli ti aiuteranno a diventare un po 'più fiducioso (come hai inizialmente affermato di essere nuovo in questo tipo di criptaggio dei CSS).

fonte

2012-01-03 15:22:45

Come centrare il testo verticalmente con css

risposta

Problemi correlati