Come rendere il testo verticalmente e orizzontalmente al centro in una pagina HTML

Ho una certa esperienza con Java, C, database, networking ecc. Ma tutto ciò che riguarda Html sono un mendicante. L'unica cosa che cerco è Centra due parole al centro della pagina (Questa pagina avrà solo quelle due parole).Come rendere il testo verticalmente e orizzontalmente al centro in una pagina HTML

       WORD1 
          WORDWORDWORDWORD2

ho provato alcuni software WYSIWYG come KompoZer, ma quando ho guardato al codice sorgente, aveva generato un codice statico orribile con un sacco di <br> per raggiungere il centro della verticale page.Anybody mi potrebbe aiutare trovare una buona soluzione a questo problema

fonte

2012-03-22 tt0686

Avete anche bisogno che sia centrato verticalmente? –

definire "nel mezzo della pagina". Centrato su e giù (verticle)? Centrato a sinistra e a destra (orizzontale)? – DwB

Sì, Simon, sono completamente grato per tutte le risposte rapide ma il problema è che tutte risolvono solo l'orizzontale centrato. Quello che mi serve sono entrambe le posizioni (orizzontale e verticale). Le parole devono essere al centro della pagina – tt0686

centraggio orizzontale è facile - centratura verticale è un po 'complicato in css in quanto non è realmente supportato (oltre alle celle di tabella <td>, che è un cattivo stile per il layout a meno che una tabella sia realmente necessaria come - beh - una tabella). Ma puoi usare tag html semanticamente corretti e applicare le proprietà di visualizzazione della tabella.

Questa è una soluzione possibile: ci sono molti approcci, here is a good article on that.

Nel tuo caso una cosa del genere dovrebbe essere sufficiente:

<!DOCTYPE html> 
<html lang="de"> 
    <head> 
     <title>Hello World</title> 
     <style> 

     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
      width: 100%; 
     } 

     body { 
      display: table; 
     } 

     .my-block { 
      text-align: center; 
      display: table-cell; 
      vertical-align: middle; 
     } 
     </style> 
    </head> 
    <body> 
    <div class="my-block"> 
     WORD1<br /> 
     WORDWORDWORDWORD2 
    </div> 
    </body> 
</html>

fonte

2012-03-22 15:58:57 acme

Grazie !!! Soluzione perfetta e grazie per il collegamento pure – tt0686

Prego - (i puristi dell'HTML utilizzerebbero direttamente il '' come contenitore di testo invece di un ulteriore div). – acme

Just do it come

<div style="text-align:center;"> 
    WORD1<br /> 
    WORDWORDWORDWORD2 
</div>

fonte

2012-03-22 15:49:58 irfanmcsd

Per un principiante va bene, ma in generale, l'HTML dovrebbe essere il più semantico possibile, e in linea lo stile viola tale principio e separa le preoccupazioni. –

-1

per centrare il testo è possibile utilizzare il tag HTML <center>:

<center>Blah</center>

o si potrebbe utilizzare i CSS:

<style> 
    .centered_text { 
    text-align:middle; 
    } 
</style> 

<a class='centered_text'>Blah</a>

fonte

2012-03-22 15:50:35 Adjam

' è orribilmente deprecato e non dovrebbe essere usato. '' è, di default, 'display: inline' quindi la proprietà' text-align' non si applica ad essa. – Quentin

'Center' è deprecato. HTML gestisce i dati, il CSS è per la visualizzazione. –

Grazie per le informazioni @Quentin e @Chris Sobolewski. Non avevo idea che non dovresti usare '

'. E ora ci penso, hai ragione a usare il tag '' per allineare il testo. Lascerò questa risposta qui in modo che altri possano leggere i commenti e vedere dove ho sbagliato. – Adjam

modo migliore è quello di mettere in qualche elemento, come div. all'interno di div puoi facilmente centrare il testo con text-align: center; (assumendo che tu abbia impostato una certa larghezza su quel div). Poi si può centrare che div sulla pagina aggiungendo stile margine automatico (margin: 0px auto;)

w3 manual about centering ;-)

fonte

2012-03-22 15:51:09 Gatekeeper

Il modo "best practice" per farlo sarebbe questo:

Dal momento che dici che sei nuovo, Sto mostrando l'intera struttura del documento per te. Lo stile dovrebbe andare nel tag head in modo che venga caricato per primo, e tu devi avoid inline style as much as possible.

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
    .center{ 
     text-align:center; 
    } 
    </style> 
    </head> 
    <body> 
     <div class="center"> 
      <p>WORD1</p> 
      <p>WORDWORDWORDWORD2</p> 
     </div> 
    </body> 
</html>

fonte

2012-03-22 15:51:28

È possibile inserire il testo all'interno di una <div> e allineare il testo usando CSS:

<div style="text-align:center;"> 
    WORD1<br /> 
    WORDWORDWORDWORD2 
</div>

il <div> è un elemento di blocco che significa che viene allungata fino larghezza 100% e il testo sarà nella centro della pagina

jsFiddle esempio

fonte

2012-03-22 15:52:03 Teneff

Come menzionato in un'altra risposta, per un principiante va bene, ma in generale l'HTML dovrebbe essere il più semantico possibile, e nello stile di linea violare quel principio e la separazione delle preoccupazioni. –

non funziona per IE6, ma ancora.

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    /* bring your own prefixes */ 
    transform: translate(-50%, -50%); 
}

fonte

2016-01-07 14:30:34

Come rendere il testo verticalmente e orizzontalmente al centro in una pagina HTML

risposta

Problemi correlati