web-dev-qa-db-ja.com

CSSは画像とテキストを同じ行に揃えます

私は今まで何時間もさまざまな方法を探して試してきました。これら2つの画像とテキストをすべて1行で取得することはできません。画像とテキストの両方をすべて1行に配置したいimage、text、image、text私の画像はこのようにシンプルなスタイルでコード化されています

 <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>

私の「liketext」クラスには、単純なテキスト色修飾子があります。このコードでは、最初の画像とテキストは同じ行にあり、次の画像とテキストは下の行にあります。 4つのオブジェクトすべてを同じ行に配置します。私は本当にこの質問を自分で解決しようとしましたが、与えられた助けに感謝し、この投稿が他の人にも役立つことを願っています！

htmlcssstylesalignmentimage
33
Keith Drake Waggoner

どちらでも使用できます（h4要素では、デフォルトでブロックされているため）

display: inline-block;

または、要素を左/ rghtにフロートすることができます

float: left;

後にフロートをクリアすることを忘れないでください

clear: left;

以下で@VSBが共有するフロート左/右オプションのより視覚的な例：

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

設定するだけで、親タグの画像とテキストを中央に配置できます

div {
     text-align: center;
}

imgとspanの垂直中央

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

下に2番目のセットを追加するだけで、言及することの1つは、h4にブロック表示属性があるため、設定することをお勧めします。

h4 {
    display: inline-block
}

h4を「インライン」に設定します。

完全な例を以下に示します。

<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

次の例を参照してください： 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>

3
sinisterfrog

まず、インラインスタイルの使用はお勧めしません。必要な場合は、各アイテムにフロートを適用してみてください。

<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>

その後、微調整とフロートのクリアが必要になる場合があります。

3
David Morgan

H4要素は、ブロック表示タイプの要素です。 H4を強制的にインライン表示タイプにするか、Pのようなインライン要素を代わりに使用して、必要に応じてスタイルを設定できます。

参考： http://www.w3.org/TR/CSS21/visuren.html#propdef-display

したがって、H4の表示タイプを次のように変更します。

<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

この質問は2012年からのもので、その日付からいくつかの点が変更されています。Googleから多くのトラフィックを受け取っているため、flexboxソリューションとして。

今では、flexboxが推奨されるパターンです。たとえそれが IE9サポートの欠如 であってもです。

気にする必要があるのは、親要素にdisplay: flexを追加することだけです。デフォルトとして、他のプロパティを設定する必要なしに、その要素のすべての子は同じ行に配置されます。

flexboxについて詳しく知りたい場合は、それを行うことができます here 。

.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

この場合、display：inlineまたはinline-blockを使用できます。

例：

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>

Float：leftを使用しないでください。もう一度明確な行と古いメソッドを記述する必要があります。

2
Ayyappan K
vertical-align: text-bottom;

テスト済みで、これは完璧に機能しました。これを画像に適用するだけです。

1
Raj

h4内にimgを挿入してみてください 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>​
0
james