CSS Appropriate Way to Center Content

Je préfère travailler avec la conception basée sur CSS, mais comme plus d'un codeur back-end mes compétences CSS sont un peu faibles. Quand je suis impliqué dans la mise en page, j'ai tendance à me rabattre sur le formatage basé sur la table parce que mon esprit a été déformé par des années d'abus basé sur la table. Il y a un problème particulier sur lequel je trébuche toujours. Quelle est la meilleure alternative CSS:CSS Appropriate Way to Center Content

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

J'utilise parfois:

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

Mais cela ne semble pas tout à fait raison. Je n'essaie pas d'aligner du texte, j'essaie d'aligner le contenu. En outre, cela semble avoir un effet sur l'alignement du texte des éléments inclus, ce qui nécessite de peaufiner pour corriger. Une chose que je ne comprends pas est: pourquoi n'y a-t-il pas un flottant: le style du centre? Il semble que ce serait la meilleure solution. Heureusement, il me manque quelque chose et il y a un moyen CSS parfait pour le faire.

Source

2009-04-06 Paul Keister

Vous avez raison: text-align est destiné à l'alignement du texte. En fait, Internet Explorer vous permet de centrer autre chose que du texte. Tout autre navigateur gère cela correctement et ne laisse pas les éléments du bloc être affectés par text-align.

Pour centrer des éléments de bloc en utilisant css, vous utilisez margin: 0 auto; exactement comme Joe Philllips l'a suggéré. Bien que vous n'ayez pas besoin de garder la table du tout.

La raison pour laquelle il n'y a pas de float: center; est que le flottant est destiné à placer des éléments (généralement des images) soit à gauche ou à droite et à avoir un flux de texte autour d'eux. Flottant quelque chose au centre n'a pas de sens dans ce contexte car cela signifierait que le texte devrait circuler des deux côtés de l'élément.

Source

2009-04-06 19:07:08 Guffa

Belle prise avec la table. Je n'ai pas regardé assez attentivement cela. –

Salut merci la réponse, ça aide. Mais comment 'marge: 0 auto;' fait la magie, je ne comprends pas pourquoi zéro et la valeur automatique va centrer la table? – GMsoF

@GMsoF: Le zéro est la marge verticale et l'auto est la marge horizontale. 'margin: 0 auto;' est la forme abrégée de 'margin: 0 auto 0 auto;', qui est la forme courte de 'margin-top: 0; marge-droite: auto; marge-bas: 0; marge-gauche: auto; – Guffa

Je recommande de mettre un <div> dans votre <td> et définissant l'attribut de style à style="width: 200px; margin: 0 auto;"

Le hic est que vous devez définir une largeur fixe. Après avoir revu la question, je vous recommande de mettre au rebut la table entièrement. Il suffit d'utiliser un <div style="width: 200px; margin: 0 auto;> comme je l'ai suggéré et pas besoin d'une table.

Source

2009-04-06 18:43:22

Salut merci la réponse, ça aide. Mais comment marge: 0 auto; fait la magie, je ne comprends pas pourquoi zéro et la valeur automatique va centrer la table? – GMsoF

La réponse de d03boy est correcte pour la bonne façon de centrer les choses. Pour répondre à votre autre commentaire, "En outre, cela semble avoir un effet sur l'alignement du texte des éléments inclus, ce qui nécessite d'ajuster pour résoudre." C'est la nature du fonctionnement de CSS, définir une propriété sur un élément affecte tous ses enfants, à moins que la propriété ne soit surchargée par l'un d'entre eux (en supposant que la propriété est inherited, bien sûr).

Source

2009-04-06 18:50:33

Où vous trouvez-vous souvent en train de faire cela? Pour moi - je suis le plus souvent en train de centrer toute la conception du site, donc je fais habituellement ceci:

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

Ce centrera toute la conception sur la page à 980px de largeur, tout en laissant tout votre texte aligné à gauche (tant que ce texte est dans l'élément #wrapper).

Source

2009-04-06 18:58:17

Voici une bonne ressource pour le centrage en utilisant CSS.
http://www.w3.org/Style/Examples/007/center
Ceci montre comment centrer le texte, les blocs, les images et comment les centrer verticalement.

Source

2009-04-06 19:11:32

Utilisez display:inline-block pour permettre text-align:center et le contenu du centre sans une largeur fixe:

<!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>

Source

2012-10-20 22:04:34

C'est une bonne astuce! –

Répondre

Questions connexes