HTML Center Text - Comment aligner verticalement CSS une division

Dans le monde HTML et CSS, tout est question de structure de mise en page et de distribution des éléments. Nous utilisons généralement du HTML pour définir le balisage et la structure, tandis que CSS nous aide à gérer le style et l'alignement des éléments.

Dans cet article, nous allons en apprendre un peu plus sur les différentes façons dont nous pouvons centrer les éléments HTML et gérer l'alignement vertical avec CSS.

Nous allons d'abord apprendre à aligner le texte avec CSS.

Ensuite, nous verrons comment aligner un div et tout autre élément.

Et enfin, nous allons apprendre comment mettre du texte et un divensemble dans un conteneur.

Comment centrer le texte

Il existe de nombreuses façons de centrer le texte en utilisant CSS.

Utilisation de la propriété Float

Float est un moyen simple d'aligner du texte.

Pour placer le texte sur le côté droit de la mise en page, nous pouvons simplement utiliser right  comme valeur pour float.

Pour placer le texte sur le côté gauche, nous utilisons left, comme float:left. Regardez l'exemple ci-dessous:

 .right { float: right; } .left { float: left; } // HTML Right Left

Pour centrer le texte en utilisant float, nous pouvons utiliser margin-leftou margin-rightet le créer   50%, comme ci-dessous.

 .center { float: left; margin-left: 50%; } /* HTML*/ Center

Vous pouvez en savoir plus sur les utilisations d' Floatici.

Utilisation de Text-align

text-alignest une manière plus pratique et plus spécifique d'aligner le texte. Cela nous permet de placer le texte sur le côté centerou sur le côté leftou right, comme le montre l'exemple suivant:

.right { text-align: right; } .left { text-align: left; } .center { text-align: center; } /* HTML */ 

Right

Center

Left

En savoir plus sur text-align.

Comment aligner un div

Eh bien, il existe de nombreuses façons de le faire.

De la même manière que nous utilisons Floatpour aligner le texte, nous pouvons également l'utiliser pour aligner un divélément.

Floatfait le travail, mais CSS nous offre de meilleures options qui sont plus pratiques et élégantes. En avez-vous entendu parler Flexbox? Ou css-grid?

Eh bien, ces deux méthodes fournissent des moyens très modernes d'aligner et de travailler avec votre mise en page en CSS. Regardons Flexbox plus en détail.

Flexbox  

Flexbox offre un moyen simple et direct d'aligner un div- et c'est ma méthode préférée jusqu'à présent pour gérer les mises en page en CSS (je l'utilise tous les jours).

Voyons ce que nous ferions Flexboxpour voir comment cela fonctionne en recréant le même exemple que ci-dessus.

L'exemple:

Le code:

      Flexbox  .container { display: flex; } .container div { width: 33%; height: 60px; } .left { background: yellow; } .right { background: red; } .center { background: lightblue; } Left div centered div right div 

décomposons-le

  • Nous définissons toujours un div  parent en utilisant display:flexpour postuler Flexbox. Nous rendons donc tous les enfants de div à l'intérieur du parent divcapables d'être manipulés à l'aide de Flexboxpropriétés.
  • Le   flex-directionutilise la rowdirection par défaut, ce qui signifie que les éléments seront placés verticalement dans le conteneur.
  • Avec la justify-contentpropriété, nous pouvons aligner divles enfants de a dans différentes directions, comme dans l'exemple suivant:
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
  • justify-content:center  place les éléments au centre du conteneur.
  • justify-content:flex-start place les éléments au début du conteneur à gauche.
  • justify-content:flex-end place les éléments à l'extrémité du conteneur sur le côté droit.
  • justify-content:space-around fait tenir les éléments dans le conteneur et met un espace égal entre tous les éléments.
  • justify-content:space-evenly distribue les éléments dans le conteneur parent de manière égale avec le même espace et la même largeur.

L'exemple ci-dessus s'applique aux enfants de tous les éléments en tant que groupe.

Imaginez si nous voulions en aligner un seul divà l'intérieur du conteneur. Nous pouvons toujours utiliser align-selfpour aligner un seul élément.

.container div{ align-self:center /* can have: flex-start, or flex-end*/ }

On peut appliquer la même chose à un texte avec Flexboxcomme dans l'exemple suivant:

  .right{ display: flex; align-items: flex-end; flex-direction: column; } right div 

Ceci est un excellent tweet de Julia Evans qui illustre le centrage en CSS en général:

Emballer

Il existe de nombreuses façons de centrer des éléments dans CSS. Et vous apprendrez toujours de nouvelles choses au fil du temps en pratiquant de plus en plus.

Je vous recommande donc de travailler sur quelques exemples tirés de ce que vous avez appris aujourd'hui pour que ça colle.

  • Tu devrais me suivre sur Twitter?
  • Découvrez mon Github
  • Visitez mon blog