CSS alignent des images et du texte sur la même ligne
j'ai cherché et essayé différentes méthodes depuis des heures maintenant. Je n'arrive pas à avoir ces deux images et ces textos sur une seule ligne. Je veux que les deux images et les deux textes soient sur une ligne image arrangée image, texte, image, texte mes images sont codées comme ceci avec des styles simples attacted
<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" n'a qu'un simple modificateur de couleur de texte. Avec ce code de la première image et le texte sont sur la même ligne, et la prochaine image et le texte est sur la ligne dessous. Je veux que les quatre objets soient sur la même ligne. J'ai vraiment essayé de résoudre cette question sur mon propre et d'apprécier toute aide et j'espère que ce post puisse aider les autres, eh bien je vous remercie!
9 réponses
vous pouvez utiliser (sur les éléments h4, car ils sont bloqués par défaut)
display: inline-block;
Ou vous pouvez flotter les éléments vers la gauche/rght
float: left;
N'oubliez pas de nettoyer les flotteurs après
clear: left;
exemple plus visuel pour l'option float left/right comme partagé ci-dessous par @VSB:
<h4>
<div style="float:left;">Left Text</div>
<div style="float:right;">Right Text</div>
<div style="clear: left;"/>
</h4>tout d'abord, je ne recommande pas d'utiliser les styles en ligne. Si vous devez, vous devriez essayer d'appliquer les flotteurs pour 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>
il faudra peut-être faire quelques retouches par la suite, et nettoyer les flotteurs.
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 élément H4 est un élément de type d'affichage de bloc. Vous pouvez forcer le H4 à avoir un type d'affichage inline, ou tout simplement utiliser un élément inline comme P à la place et le style comme vous le souhaitez.
pour référence:http://www.w3.org/TR/CSS21/visuren.html#propdef-display
alors vous changeriez le type d'affichage du H4 comme:
<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>
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: gauche car il faut à nouveau écrire une ligne plus claire et son ancienne méthode aussi..
vertical-align: text-bottom;
Testé, cela a fonctionné parfaitement pour moi, juste de l'appliquer à l'image.
cette question Est de 2012, certaines choses sont changées à partir de cette date, et comme il reçoit encore beaucoup de trafic de google, j'ai envie de le compléter en ajoutant flexbox comme une solution.
maintenant, flexbox est conseillé de modèle à être utilisé, même si c' manque de support IE9.
la seule chose dont vous devez vous occuper, c'est d'ajouter display: flex dans l'élément parent. Par défaut et sans la nécessité de définir d'autres propriétés, tous les enfants de cet élément seront alignés dans la même ligne.
Si vous souhaitez 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>essayez d'insérer votre img à l'intérieur de votre h4
DEMO
<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>
vous pouvez simplement centrer l'image et le texte dans la balise parent en définissant
div {
text-align: center;
}
centre vertical l'img et la portée
img {
vertical-align:middle;
}
span {
vertical-align:middle;
}
vous pouvez juste ajouter le deuxième ensemble ci-dessous, et une chose à mentionner est que h4 A l'attribut d'affichage de bloc, donc vous pourriez vouloir définir
h4 {
display: inline-block
}
pour mettre le h4 "en ligne".
L'exemple complet est affiché 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>