CSS Modo appropriato per centrare il contenuto

Preferisco lavorare con il design basato su CSS, ma come più di un codificatore back-end le mie abilità CSS sono un po 'deboli. Quando sono coinvolto nel layout, tendo a ricorrere alla formattazione basata su tabelle perché la mia mente è stata distorta da anni di abusi basati su tabelle. C'è un particolare problema su cui inciampo sempre. Qual è la migliore alternativa per CSS:CSS Modo appropriato per centrare il contenuto

<table width="100%"> 
    <tr> 
     <td align="center"> 
      content goes here 
     </td> 
    </tr> 
</table>

volte uso:

<div style="width:100%; text-align:center">content</div>

Ma questo non sembra giusto. Non sto cercando di allineare il testo, sto cercando di allineare il contenuto. Inoltre, questo sembra avere un effetto sull'allineamento del testo degli elementi racchiusi, che richiede un aggiustamento da correggere. Una cosa che non capisco è: perché non c'è un float: in centro? Sembra che sarebbe la soluzione migliore. Spero che manchi qualcosa e c'è un modo CSS perfetto per farlo.

fonte

2009-04-06 Paul Keister

Hai ragione che text-align è inteso per allineare il testo. In realtà è solo Internet Explorer che ti consente di centrare qualsiasi cosa che non sia il testo. Qualsiasi altro browser lo gestisce correttamente e non lascia influenzare gli elementi di blocco da text-align.

Per centrare gli elementi del blocco utilizzando css, utilizzare margin: 0 auto; proprio come suggerito da Joe Philllips. Anche se non è necessario tenere il tavolo affatto.

Il motivo per cui non esiste lo float: center; è che il floating è destinato a posizionare elementi (tipicamente immagini) a sinistra o a destra e avere un flusso di testo attorno ad essi. Spostare qualcosa al centro non ha senso in questo contesto, poiché ciò significherebbe che il testo dovrebbe fluire su entrambi i lati dell'elemento.

fonte

2009-04-06 19:07:08 Guffa

Bella presa con il tavolo. Non ho guardato abbastanza da vicino. –

Ciao grazie della risposta, aiuta. Ma come 'margine: 0 auto;' fa la magia, non capisco perché zero e il valore automatico centreranno la tabella? – GMsoF

@GMsoF: lo zero è il margine verticale e l'auto è il margine orizzontale. 'margin: 0 auto;' è la forma abbreviata di 'margin: 0 auto 0 auto;', che è la forma abbreviata di 'margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; '. – Guffa

Suggerirei mettere un <div> nella vostra <td> e impostare l'attributo di stile al style="width: 200px; margin: 0 auto;"

Il problema è che è necessario impostare una larghezza fissa.

Modifica: Dopo aver esaminato nuovamente la domanda, consiglierei di eliminare completamente il tavolo. Basta usare un <div style="width: 200px; margin: 0 auto;> come suggerito e non c'è bisogno di un tavolo.

fonte

2009-04-06 18:43:22

Ciao, grazie della risposta, aiuta. Ma come margine: 0 auto; fa la magia, non capisco perché zero e il valore automatico centrerà il tavolo? – GMsoF

La risposta di d03boy è corretta per il modo giusto di centrare le cose.

Per rispondere al tuo altro commento, "Inoltre, questo sembra avere un effetto sull'allineamento del testo degli elementi racchiusi, che richiede un aggiustamento da correggere." Questa è la natura di come funziona il CSS, l'impostazione di una proprietà su un elemento riguarda tutti i suoi figli, a meno che la proprietà non venga sovrascritta da uno di essi (supponendo che la proprietà sia quella che è inherited, ovviamente).

fonte

2009-04-06 18:50:33

Dove ti trovi comunemente a fare questo? Per quanto mi riguarda - sto il più delle volte cercando di centrare l'intero design del sito, così io di solito faccio questo:

<html> 
    <body> 
    <div id="wrapper"> 
    <div id="header"> 
    </div> 
    <div id="content"> 
    </div> 
    <div id="footer"> 
    </div> 
    </div> 
    </body> 
</html> 


body {text-align:center;} 
#wrapper {margin:0 auto; text-align:left; width:980px;}

Ciò centrerà l'intero disegno della pagina a 980px di larghezza, pur lasciando tutto il testo allineato a sinistra (purché quel testo sia compreso nell'elemento #wrapper).

fonte

2009-04-06 18:58:17

Ecco una buona risorsa per il centraggio tramite CSS.
http://www.w3.org/Style/Examples/007/center
Ciò dimostra come centrare il testo, i blocchi, le immagini e come centrarli verticalmente.

fonte

2009-04-06 19:11:32

Usa display:inline-block per abilitare text-align:center e al centro i contenuti, senza una larghezza fissa:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Centering</title> 

    <style type="text/css"> 
    .container { text-align:center; } 

    /* Percentage width */ 
    .wrapper { width: 99%; } 

    /* Use inline-block for wrapper */ 
    .wrapper { display: inline-block; } 

    /* Use inline for content */ 
    .content { display:inline; } 
    </style> 

</head> 
<body> 
    <div class="container"> 
    <div class="content"> 
     <div class="wrapper"> 
      <div>abc</div> 
      <div>xyz</div> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

fonte

2012-10-20 22:04:34

Questo è un bel trucco! –

CSS Modo appropriato per centrare il contenuto

risposta

Problemi correlati