web-dev-qa-db-ja.com

HTMLでテキストと画像を隣り合わせに配置する方法は？

テキストと画像を隣り合わせにしたいのですが、画像を画面の左端に配置し、テキストを画面の右端に配置したいです。これは私が現在持っているものです。

<body>
<img src="website_art.png" height= "75" width= "235"/>
<h3><font face="Verdana">The Art of Gaming</font></h3>
</body>

これどうやってするの？

ありがとう

htmlcssimagetext
25
user2426533
img {
    float:left;
}
h3 {
    float:right;
}

jsFiddleの例

フロートした要素のすぐ下にスライドしないように、指定したコードの後に​​来るすべての要素でclear:bothスタイルを使用することに注意してください。

29
j08691

css float を使用したい場合は、コードに直接配置できます。

<body>
<img src="website_art.png" height= "75" width="235" style="float:left;"/>
<h3 style="float:right;">The Art of Gaming</h3>
</body>

しかし、CSSの基本を学び、すべてのスタイルを別のスタイルシートに分割し、クラスを使用することをお勧めします。将来的に役立ちます。開始するのに適した場所は、 w3schools または、おそらくパスの後で、 Mozzila Dev。Network（MDN） です。

HTML：

<body>
  <img src="website_art.png" class="myImage"/>
  <h3 class="heading">The Art of Gaming</h3>
</body>

CSS：

.myImage {
  float: left;
  height: 75px;
  width: 235px;
  font-family: Veranda;
}
.heading {
  float:right;
}
5
Dominic Green

垂直方向の配置とフローティングを使用できます。

ほとんどの場合、画像を中央に垂直に配置します。

テストは次のとおりです。 http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align

垂直方向の整列：ベースライン|長さ|サブ|スーパー|トップ|テキスト-トップ|中間|ボトム|テキスト-ボトム|初期|継承;

中間の場合、定義は次のとおりです。要素は親要素の中央に配置されます。

そのため、それを要素内のすべての要素に適用することができます。

0
Illuminati