Aligner le contenu à l'intérieur d'un div

152

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

De plus, 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?

html css text-align Hemanshu Bhojak
la source
Donnez-nous plus d'informations s'il vous plaît? passé le code qui ne fonctionne pas dans d'autres navigateurs.
Shoban
Vous devriez donner un exemple de votre balisage pour que les gens sachent ce que vous essayez de faire. Sinon, votre question est ambiguë.
levik

Réponses:

216

text-align aligne le texte et tout autre contenu en ligne. Il n'aligne pas les enfants des éléments de bloc.

Pour ce faire, vous voulez donner à l'élément que vous voulez aligner une largeur, avec des marges gauche et droite 'auto'. 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 le mode Standards est activé en utilisant un DOCTYPE approprié.

Si vous avez vraiment besoin de prendre en charge le mode IE5 / Quirks, ce que vous ne devriez pas vraiment de nos jours, 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>

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

bobince
la source
2
Si vous ne connaissez pas la largeur de div, ce qui est souvent le cas, cette solution fonctionne parfaitement dans tous les navigateurs: matthewjamestaylor.com/blog
Artem Russakovskii
J'ai utilisé <div style = "width: 100%; margin: 0 auto;"> Bonjour </div>
Aamol
9

Vous pouvez également le faire comme ceci:

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 l'a également mentionné, lisez l'article original de Mattew James Taylor pour une description complète.

Mahdi
la source
9 
<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}
krithi k
la source
1
Bien que cet extrait de code puisse résoudre la question, inclure une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondez à la question aux lecteurs à l'avenir, et que ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.
andreas
Désolé, le code ci-dessus alignera un centre div avec le contenu parent
krithi k
6

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 s'aligner correctement ... alors voici ce que je fais habituellement:

Je sais quelles valeurs de pixel chaque div et leurs marges respectives contiennent ... alors je fais ce qui suit.

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

.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 wrapper pour certains navigateurs pour ne pas afficher les barres de défilement, puis vous pouvez utiliser le positionnement absolu pour tous les div internes.

Cela fonctionne également INCROYABLE pour aligner verticalement votre contenu ainsi qu'en utilisant top: 50% et margin-top. À votre santé!

Alexandru
la source
2

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>
Développer l'extrait

Limier
la source
2

Voici les méthodes qui ont toujours fonctionné pour moi

  1. En utilisant le modèle de disposition flexible :

Définissez l'affichage du div parent sur display: flex;et vous pouvez aligner les éléments enfants à l'intérieur du div à l'aide des boutons justify-content: center;(pour aligner les éléments sur l'axe principal) et align-items: center;(pour aligner les éléments sur l'axe transversal).

Si vous avez plusieurs éléments enfants et que vous souhaitez contrôler la manière dont ils sont organisés (colonnes / lignes), vous pouvez également ajouter une flex-directionpropriété.

Exemple de travail:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}
<div class="parent">
  <div class="child"></div>
</div>
Développer l'extrait

2. (méthode plus ancienne) Utilisation de la position, des propriétés de marge et de la taille fixe

Exemple de travail:

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}
<div class="parent">
  <div class="child"></div>
</div>
Développer l'extrait

nmak18
la source
1

Toutes les réponses parlent d'alignement horizontal.

Pour l'alignement vertical de plusieurs éléments de contenu, jetez un œil à 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>
Développer l'extrait

Nicolas
la source
-2

Juste un autre exemple utilisant HTML et CSS:

<div style="width: Auto; margin: 0 auto;">Hello</div>
Diogo
la source
27
Rien de ce que vous avez écrit n'est spécifique à ASP.NET. Ce n'est que du HTML et du CSS en ligne. Vouliez-vous écrire un contrôle serveur avec des propriétés?
webworm
1
Fixé. La réponse mentionne maintenant les bonnes technologies.
jony