Manipuler la position de l'image à l'aide de CSS

Introduction

Je joue avec CSS et HTML depuis un certain temps et franchement, je suis surpris de ne jamais avoir été confronté au problème du centrage vertical d'une image dans un conteneur avec du texte. Il est très facile de manipuler le positionnement de l'image par lui-même et de manipuler le positionnement du texte. Il est également facile de manipuler les deux ensemble. Ce que je voulais faire, c'était mettre l'image et le texte dans le même conteneur, aligner l'image à gauche et aligner l'en-tête au centre.

Le défi

Le texte que j'utilisais était le titre de mon site avec l'élément HTML element est un élément en ligne, ce qui signifie qu'il est heureux de jouer avec d'autres sur la même ligne. Bien sûr, je pourrais jouer avec la propriété CSS float, mais il y a un problème. Au moment où j'introduis float pour un élément, cet élément est retiré du flux de documents. et il devient difficile de contrôler le comportement de cet élément.

Possibilités

Comme mentionné précédemment, j'ai essayé d'utiliser float: left et float: inline-start, mais cela ne se comporte pas toujours comme je le souhaite. En tant que bonne pratique, j'essaie d'utiliser les techniques les plus récentes autant que possible et c'est là que le flex moderne et le CSS GridBox sont entrés en jeu. Flexbox, lorsqu'il est attribué au conteneur parent, aligne tout le texte du contenu à gauche comme indiqué ci-dessous.

Après de nombreux essais et erreurs, il s'agissait d'utiliser la spécificité et de devenir minimaliste. Je voulais également avoir la possibilité de styliser les images que je pourrais utiliser indépendamment sur le site, donc je n'ai appliqué aucun style à l'élément principal img. J'ai créé plusieurs classes pour manipuler les images et les ai appliquées. Durant tous ces essais et erreurs, un autre problème m'a contrarié. Je n'arrivais pas à aligner l'image sur le milieu du conteneur parent avec toutes les techniques que je connaissais. J'ai fait des recherches et essayé avec la propriété align-self. Cela a finalement fonctionné. Je ne voulais pas appliquer cela à l'élément img principal et je ne voulais pas créer de classe pour cela, j'ai donc utilisé Child Combinator pour cibler l'élément img spécifique qui est un enfant de l'élément d'en-tête (en-tête > img) . Cela a résolu le problème de l’alignement de l’image.

Le problème suivant était d'aligner le texte d'en-tête au centre. J'ai essayé toutes les astuces que je connaissais avec text-align, align-self, align-items, Justify-self et Justify-Items. Mais comme l’élément d’en-tête parent était marqué comme flex, les styles suivants ne s’appliquaient pas. Finalement, j'ai essayé une astuce simple pour centrer le contenu en utilisant margin: auto et cela a fait l'affaire. Voici à quoi ressemble maintenant le résultat final.

Même lorsque je modifie la hauteur du conteneur d'en-tête, l'image et le texte sont verticalement au milieu de l'élément et restent là sur l'axe des x.

Code final

Code HTML :

<header class="flexi">
  <img class="round-img small" src="img/Mukul-2019.jpg" alt="Mukul Dharwadkar" caption="Picture of Mukul Dharwadkar" />
  <h1 class="center-align">
    Mukul Dharwadkar
  </h1>
</header>

Code CSS :

header {
    width: 900px;
    margin: auto;
    height: 120px;
    background-color: antiquewhite;
  }

/* The CSS rule below is highly specific for an img element that is a child of the header element.
Typically there will be only one img element inside the header and therefore this is safe to keep */

header > img {
  align-self: center;
}

.flexi {
  display: flex;
}

.round-img {
  border-radius: 50%;
}

.small {
  width: 100px;
}

.flexi {
  display: flex;
}

.center-align {
  margin: auto;
}

Le code complet se trouve sur mon dépôt Github. N'hésitez pas à l'utiliser.

Conclusion:

Atteindre l'alignement parfait des images et du texte dans la conception Web nécessite souvent d'expérimenter différentes techniques CSS. Dans ce cas, Flexbox s'est avéré être la solution la plus efficace et la plus moderne pour centrer le contenu dans un conteneur, tout en conservant la flexibilité nécessaire pour ajuster le style de manière indépendante. En utilisant des sélecteurs ciblés comme Child Combinator et en tirant parti des propriétés d’alignement de Flexbox, j’ai pu résoudre le problème de manière propre et efficace. Cette méthode non seulement rationalise le code, mais garantit également que les futurs ajustements seront plus faciles à gérer. CSS peut être délicat, mais avec la bonne approche, vous pouvez créer des mises en page soignées et professionnelles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!