web-dev-qa-db-fra.com

Aligner le contenu dans une div

J'utilise css style text-align pour aligner le contenu d'un conteneur en HTML. Cela fonctionne bien lorsque le contenu est du texte ou que le navigateur est IE. Mais sinon ça ne marche pas.

En outre, comme son nom l'indique, il est essentiellement utilisé pour aligner le texte. La propriété align est obsolète depuis longtemps.

Existe-t-il un autre moyen d'aligner le contenu en HTML?

htmlcsstext-align
138
Hemanshu Bhojak

text-align aligne le texte et les autres contenus en ligne. Cela n'aligne pas les enfants d'élément de bloc.

Pour ce faire, vous voulez donner à l’élément que vous souhaitez aligner une largeur, avec des marges «auto» gauche et droite. C'est la méthode conforme aux normes qui fonctionne partout sauf IE5.x.

<div style="width: 50%; margin: 0 auto;">Hello</div>

Pour que cela fonctionne dans IE6, vous devez vous assurer que Mode normalisé est activé en utilisant un DOCTYPE approprié.

Si vous devez réellement prendre en charge le mode IE5/Quirks, ce qui n’est pas vraiment le cas, il est possible de combiner les deux approches différentes du centrage:

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(Évidemment, les styles sont mieux placés dans une feuille de style, mais la version en ligne est illustrative.)

202
bobince

Vous pouvez le faire comme ça aussi:

HTML

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

CSS

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

Comme Artem Russakovskii mentionné également, lisez l'article original de Mattew James Taylor pour une description complète.

8
Mahdi

Honnêtement, je déteste toutes les solutions que j'ai vues jusqu'à présent et je vais vous dire pourquoi: elles ne semblent tout simplement pas l'aligner correctement… alors voici ce que je fais habituellement:

Je sais quelles valeurs de pixel chaque div et leurs marges respectives sont respectées ... alors je fais ce qui suit.

Je vais créer un div wrapper qui a une position absolue et une valeur à gauche de 50% ... alors ce div commence maintenant au milieu de l'écran, puis je soustrais la moitié de tout le contenu de la largeur de la div ... et j'obtiens BEAUCOUPEMENT une mise à l'échelle du contenu ... et je pense que cela fonctionne également sur tous les navigateurs. Essayez-le vous-même (cet exemple suppose que tout le contenu de votre site est enveloppé dans une balise div qui utilise cette classe et que le contenu de cette classe a une largeur de 200px):

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

EDIT: J'ai oublié d'ajouter ... vous pouvez également définir la largeur: 0px; sur ce div de wrapper pour que certains navigateurs ne montrent pas les barres de défilement, vous pouvez alors utiliser le positionnement absolu pour tous les divs internes.

Cela fonctionne également à merveille pour aligner verticalement votre contenu en utilisant top: 50% et margin-top. À votre santé!

6
Alexandru
<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}
5
krithi k

Voici une technique que j'utilise qui a bien fonctionné:

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

2
Bloodhound

Toutes les réponses parlent d'alignement horizontal.

Pour aligner verticalement plusieurs éléments de contenu, examinez cette approche:

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

0
Nicolas