Aligner horizontalement une image et un texte

Aligner horizontalement une image et un texte

17 juin 2019 0 Par Miss Dev

Dans les forums et avec mes élèves, je vois souvent cette question resurgir. Que ce soit pour réaliser une liste comme sur ce site, mettre votre photo en face du titre de votre CV ou bien dans votre blog, il est toujours utile de savoir comment fonctionne l’alignement d’une image et d’un texte horizontalement en CSS.

Il existe néanmoins plusieurs réponses à cette question. Car il ne suffit pas simplement de les aligner horizontalement, mais également aligner le texte verticalement par rapport à l’image. Nous allons ici voir les solutions possibles en utilisant les propriétés float, display et même avec le Framework Bootstrap. Nous verrons différentes méthodes ici qui se complèteront efficacement suivant vos besoins.

Aligner horizontalement une image et une seule ligne de texte

Si vous désirez par exemple, aligner une icône et son lien menant vers une autre page, vous pouvez utiliser cette méthode.

Aligner Une Image Avec Une Seule Ligne De Texte En Css Pur

Pour l'HTML

Rien de compliqué, il suffit simplement d’insérer une image et du texte dans une balise englobante telle qu’une balise p.

HTML
<p>
  <img src="https://www.freeiconspng.com/uploads/news-icon-12.png" alt="" /><a href="">Toute les nouveautés ici !</a>
</p>
<p>
  <img src="https://pngimage.net/wp-content/uploads/2018/06/icone-blog-png-9.png"> <a href="">Tous les articles du blog</a>  
</p>

Utiliser vertical-align

Une fois le squelette HTML réalisé, il n’y a plus qu’à utiliser la propriété vertical-align en CSS. Ici, j’ai voulu centrer le texte. J’ai donc utilisé middle. Mais il existe également d’autres positionnement possible cité juste après.

Vous pouvez également redimensionner l’image si nécessaire avec width, ici à 100px.

CSS
img {  
  width : 100px;  
  vertical-align:middle;
}

à part la valeur middle, il existe également la possibilité de positionner le texte au-dessus, en dessous etc… En voici un large panel :

Les Différents Type D'alignements Avec Une Seule Ligne De Texte En Css Pur

Aligner une image et un texte de plusieurs lignes avec float

Étant l’alignement qui vous servira certainement le plus, nous allons nous y attarder davantage. En effet, c’est utilisé très souvent. Par exemple, pour lister des articles de blog. Ici, nous allons voir la propriété float qui peut prendre plusieurs valeurs, comme left ou right pour le positionnement à gauche ou à droite etc.

HTML

J’écris le squelette comme ci c’était un article, avec l’image à gauche et la partie titre et texte à droite.

HTML
<div class="div-categoryContainer">
    
  <img src="https://cdn.tutsplus.com/vector/uploads/2014/03/gem-PW-diamond.jpg" class="picture-left">

  <div class="paragraph-right">
    <h2>Titre du paragraphe</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

CSS

C’est dans le CSS que l’on ajoute la propriété float à l’image. Cette image doit se trouver à gauche du texte, on y définit donc sa valeur qui est… left, bien sûr.

CSS
.picture-left{
	float: left;
}

On obtient ce qui suit :

Aligner Texte Et Img Avec Float Part1

Seulement à ce moment-là, on décide d’aligner le texte au centre. On essaie alors margin:auto,  cela ne fonctionne pas. Alors on tente margin-top : 50px et là, surprise, l’image se déplace en même temps que le texte…

Comment résoudre le problème d'alignement du texte avec float ?

Cela se passe dans le container englobant l’image et la partie texte. Il suffit de lui définir une propriété de positionnement tel qu’un margin ou un padding. Reprenons donc le CSS :

CSS
.picture-left{
	float: left;
}

.div-categoryContainer{
	padding: 10px;
}

.paragraph-right {
  margin-top : 50px;
}

Ce qui donne simplement :

Aligner Texte Et Img Avec Float Part2

J’ai rajouté une mise en page supplémentaire sur codePen, alors n’hésitez pas à vous entrainer :

Alignement grâce aux flexbox

La propriété display peut utiliser la valeur flex sur l’ensemble d’un conteneur pour lui dire que son contenu doit se comporter comme des flexblox. Il existe également une propriété flex qui peut avoir différentes valeurs, comme des chiffres ou des valeurs globales (initial, inherit, unset).

Avec le même squelette utilisé dans la partie précédente pour float, nous allons changer le CSS :

CSS
.div-categoryContainer{
 display : flex;
}
.picture-left {
  flex: 2
}
.paragraph-right {
  flex : 6;
  margin-top : 50px;
}
Aligner Texte Et Img Avec Flex

Le mieux est que ce code est responsive. Mais, bien sûr, cela dépend des réglages de départ. Car attention à la déformation de l’image.

Un exemple concret

Imaginons que nous voulons créer une page d’accueil comme celle qui suit. On pourrait alors utiliser la propriété float pour la partie en rouge et les flexbox pour la partie en bleu car elles s’aligneront plus facilement les unes aux autres quelle que soit la taille de l’écran. Elles se mettront même l’une en dessous de l’autre avec la propriété : flex-wrap: wrap;

Page D'accueil D'un Site Lambda A Reproduire Avec Les Alignements Float Et Flex

Aligner une image et un texte avec Bootstrap

Le meilleur pour la fin avec le Framework Bootstrap. Il permet des alignements facilités. En voici la preuve.

Utiliser les classes HTML

Le HTML est très important ici car on va utiliser des classes présentes en Boostrap. Ces classes sont container, qui va englober le tout ; la classe row qui permet de faire une ligne ; les classes col-4 et col-8 pour définir les colonnes, ainsi que leur taille (voir plus d’informations).

HTML
<div class="container">
  <div class="row"> 
    <div class="col-4">
      <img src="https://initiativedeveloppeur.fr/wp-content/uploads/2019/05/ebook-Comment-avoir-une-image-de-marque-efficace-Miss-Dev.png" />
    </div>  
    <div class="col-8">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis fermentum nibh, sit amet consectetur nibh pulvinar id. Mauris lectus turpis, finibus mollis tellus vel, viverra placerat odio. Duis facilisis dignissim rhoncus. Nullam tincidunt, nibh ut euismod bibendum, augue purus commodo diam, ut maximus leo enim at leo. Mauris vel eros pulvinar, pretium nunc nec, rhoncus leo. Quisque imperdiet a tortor quis aliquet. Duis quis pellentesque arcu. Nunc at diam sed eros venenatis dignissim quis ac nisl. Vestibulum tincidunt dolor quis massa bibendum tempus. Aenean vel nisl velit. Cras venenatis ultricies mauris ac imperdiet. Ut in mi mauris.
    </div>  
  </div>
</div>

Pour insérer le bootstrap dans votre page HTML :


peaufiner avec le CSS

Il n’y a pas beaucoup de choses à modifier en CSS à par la mise en page pur et dur. Il faut également changer la taille de l’image si nécessaire.

CSS
img {
  width : 50%;
}

A éviter

Par convention, il ne faut plus utiliser la balise ‹center› d’HTML. Elle est obsolète. Tout comme  ‹div align=“center”›. Il faut utiliser du CSS.