web-dev-qa-db-fra.com

CSS aligne les images et le texte sur la même ligne

Je cherche et j'essaie différentes méthodes depuis des heures. Je n'arrive pas à obtenir ces deux images et texte sur une seule ligne. Je veux que les images et le texte soient tous sur une seule ligne image arrangée, texte, image, texte Mes images sont codées comme ceci avec des styles simples

 <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/><h4 class='liketext'>$likes</h4>
 <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>

Ma classe "liketext" est juste un modificateur de couleur de texte simple. Avec ce code, la première image et le texte sont sur la même ligne, et l'image et le texte suivants sont sur la ligne ci-dessous. Je veux que les quatre objets soient sur la même ligne. J'ai vraiment essayé de résoudre cette question par moi-même et j'apprécie toute aide apportée. J'espère que ce message pourra également aider les autres. Merci!

htmlcssstylesalignmentimage
33
Keith Drake Waggoner

Vous pouvez soit utiliser (sur les éléments h4, car ils sont bloqués par défaut)

display: inline-block;

Ou vous pouvez faire flotter les éléments à gauche/droite

float: left;

N'oubliez pas de vider les flotteurs après

clear: left;

Exemple plus visuel pour l'option float left/right, partagée ci-dessous par @VSB:

<h4> 
    <div style="float:left;">Left Text</div>
    <div style="float:right;">Right Text</div>
    <div style="clear: left;"/>
</h4>
41
Adrift

Vous pouvez simplement centrer l'image et le texte dans la balise parent en définissant

div {
     text-align: center;
}

centre vertical img et span

img {
     vertical-align:middle;
}
span {
     vertical-align:middle;
}

Vous pouvez simplement ajouter le second ensemble ci-dessous, et une chose à mentionner est que h4 a un attribut d’affichage de bloc, vous pouvez donc définir

h4 {
    display: inline-block
}

pour définir le h4 "inline".

L'exemple complet est montré ici.

<div id="photo" style="text-align: center">
  <img style="vertical-align:middle" src="https://via.placeholder.com/22x22" alt="">
  <span style="vertical-align:middle">Take a photo</span>
</div>
5
Brady Huang

Voir l'exemple à: http://jsfiddle.net/6Rpkh/

<style>
img.likeordisklike { height: 24px; width: 24px; margin-right: 4px; }
h4.liketext { color:#F00; display:inline }
​</style>

<img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>

Un séjour sans faille

3
sinisterfrog

Tout d'abord, je ne recommanderais pas l'utilisation de styles en ligne. Si vous devez, vous devriez essayer d'appliquer des flottants à chaque élément:

<img style='float:left; height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>
<h4 style='float:left;" class='liketext'>$likes</h4>
<img style='float:left; height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/>
<h4 style='float:left;" class='liketext'>$dislikes</h4>

Cela pourrait nécessiter quelques ajustements par la suite et le nettoyage des flotteurs.

3
David Morgan

Un élémentaire H4 est un élément de type à affichage par blocs. Vous pouvez forcer le H4 à utiliser un type d'affichage en ligne ou simplement utiliser un élément en ligne tel que P à la place et le styler à votre guise.

Pour référence: http://www.w3.org/TR/CSS21/visuren.html#propdef-display

Donc vous changeriez le type d’affichage du H4 comme suit:

<html>
<head>
   <title>test</title>
   <style type='text/css'>
     h4 { display: inline }
   </style>
  </head>
  <body>
  <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/><h4 class='liketext'>$likes</h4>
  <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>
</body>
</html>
2
trev

Cette question date de 2012, certaines choses ont changé depuis cette date et, comme elle reçoit toujours beaucoup de trafic de Google, j'ai envie de la compléter en ajoutant flexbox comme solution.

A ce stade, flexbox est le modèle recommandé, même si sans prise en charge de IE9 .

La seule chose dont vous devez vous soucier, est d’ajouter display: flex dans l'élément parent. Par défaut et sans qu'il soit nécessaire de définir une autre propriété, tous les enfants de cet élément seront alignés dans la même ligne.

Si vous voulez en savoir plus sur flexbox, vous pouvez le faire ici .

.container {
  display: flex;
}

img {
  margin: 6px;
}
<div class="container">
  <img src="https://placekitten.com/g/300/300" /> Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
2
Cristian Traìna

Dans ce cas, vous pouvez utiliser display: inline ou inline-block.

Exemple: 

img.likeordisklike {display:inline;vertical-align:middle;  }
h4.liketext { color:#F00; display:inline;vertical-align:top;padding-left:10px; }
<img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>

Ne pas utiliser float: left car encore une fois, il faut écrire une autre ligne claire et son ancienne méthode aussi ..

2
Ayyappan K
vertical-align: text-bottom;

Testé, cela a parfaitement fonctionné pour moi, appliquez-le simplement à l'image.

1
Raj

essayez d'insérer votre img à l'intérieur de votre h4 DÉMO 

<h4 class='liketext'><img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>$likes</h4>
<h4 class='liketext'> <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/>$dislikes</h4>​
0
james