J'utilise le style css text-align pour aligner le contenu à l'intérieur d'un conteneur en HTML. Cela fonctionne bien lorsque le contenu est du texte ou que le navigateur est IE. Mais dans le cas contraire, cela ne fonctionne pas.
Comme son nom l'indique, il sert essentiellement à aligner le texte. La propriété align est obsolète depuis longtemps.
Existe-t-il un autre moyen d'aligner les contenus en html ?
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 devez donner une largeur à l'élément que vous souhaitez aligner, avec des marges gauche et droite "auto". C'est la méthode conforme aux normes qui fonctionne partout sauf dans IE5.x.
<div style="width: 50%; margin: 0 auto;">Hello</div>Pour que cela fonctionne dans IE6, vous devez vous assurer que Mode Normes en utilisant un DOCTYPE approprié.
Si vous devez vraiment prendre en charge le mode IE5/Quirks, ce qui n'est plus vraiment le cas 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>(Il est évident qu'il est préférable de placer les styles dans une feuille de style, mais la version en ligne est illustrative).
Si vous ne connaissez pas la largeur de la div, ce qui est souvent le cas, cette solution fonctionne parfaitement dans tous les navigateurs : matthewjamestaylor.com/blog/
Voici les méthodes qui ont toujours fonctionné pour moi
Définir l'affichage de la div parent à display: flex; et vous pouvez aligner les éléments enfants à l'intérieur de la div à l'aide de la balise 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 plus d'un élément enfant et que vous souhaitez contrôler la façon dont ils sont disposés (colonne/rangée), vous pouvez également ajouter flex-direction proprié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>2. (ancienne méthode) Utiliser la position, les propriétés de marge et 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>
Vous pouvez également procéder de cette manière :
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%; }En Artem Russakovskii mentionné également, lire l'article original par Mattew James Taylor pour une description complète.
Honnêtement, je déteste toutes les solutions que j'ai vues jusqu'à présent, et je vais vous dire pourquoi : Elles ne semblent jamais s'aligner correctement... voici donc ce que je fais habituellement :
Je sais quelles sont les valeurs en pixels de chaque div et de leurs marges respectives... je fais donc ce qui suit.
Je vais créer une div enveloppante qui a une position absolue et une valeur gauche de 50%... donc cette div commence au milieu de l'écran, et ensuite je soustrais la moitié de tout le contenu de la largeur de la div... et j'obtiens un contenu qui se met magnifiquement à l'échelle... et je pense que cela fonctionne aussi sur tous les navigateurs. Essayez vous-même (cet exemple suppose que tout le contenu de votre site est enveloppé dans une balise div qui utilise cette classe enveloppante et que tout le contenu de cette balise a une largeur de 200px) :
.wrapper {
position: absolute;
left: 50%;
margin-left: -100px;
}EDIT : j'ai oublié d'ajouter... vous pouvez également définir width : 0px ; sur cette div wrapper pour que certains navigateurs n'affichent pas les barres de défilement, et vous pouvez ensuite utiliser le positionnement absolu pour toutes les divs internes.
Cette méthode fonctionne également à merveille pour aligner verticalement votre contenu en utilisant le haut de page : 50% et margin-top. Merci à tous !
Mais comment cela fonctionne-t-il pour les pages réactives ? C'est la pire des solutions :-(
@Zimano Je suppose que pour ce terme familier de pages réactives, vous parlez d'un type de site à contenu défilant ? Il est toujours possible d'afficher et de cacher des divs à certaines positions de la fenêtre ou de la barre de défilement à l'aide d'un peu de code et d'un calcul simple. Il semble que cela fonctionne très bien pour les personnes qui ont voté pour moi.
Si vous ne savez pas pour quelles tailles ou orientations d'écran vous allez développer, vous ne serez pas aidé par des largeurs de pixels codées en dur dans votre CSS et votre HTML. Si vous créez un site de bureau et que vous pouvez garantir la résolution et le rapport hauteur/largeur et que vous ne voulez pas changer dynamiquement d'échelle, alors cela peut être une solution !
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Donnez-nous plus d'informations s'il vous plaît ? passez le code qui ne fonctionne pas dans les autres navigateurs.
0 votes
Vous devriez donner un exemple de votre balisage pour que les gens sachent ce que vous essayez de faire. Sinon, votre question est ambiguë.