0

これが私のコードです：

<div id="banner">
  <h1 class="title">Sam Clark</h1> <img src="Images/twitter.png" width="35" height="35" alt="Twitter" id="twitter-img" />
  </div>

画像が新しい行に表示されます...どうすればこれを止めることができますか? ところで、水平方向に中央揃えする必要がないことに気付きました...申し訳ありません。

4

3 に答える 3

2

<h1>要素はブロック レベルの要素です。つまり、デフォルトで入力幅を占有します。画像をテキストと同じ行に表示したい場合は、要素内でテキストと一緒に定義する必要があります。

<h1 align="center" class="title">
    Sam Clark <img src="Images/twitter.png" width="35" height="35" alt="Twitter" id="twitter-img" />
</h1>

画像を左または右に浮かせようとしている場合は、要素の前に定義する必要があります。<h1>

いくつか遊んだ後、ヘッダー自体内のテキストの水平方向の中央揃えを維持しながら、画像の横にあるテキストを垂直方向に中央揃えにする方法を見つけることができましたが、追加の (非セマンティック) 要素を追加する必要があります。

<h1 class="title">
    <span><img src="Images/twitter.png" width="35" height="35" alt="Twitter" id="twitter-img" /> Sam Clark</span>
</h1>

h1.title {
    text-align: center;
}
h1.title span {
    display: inline-block;
    line-height: 35px;
}
h1.title span img {
    float: right;
    margin-left: 7px;
}

jsFiddle を参照してください。

于 2012-05-15T18:18:04.337 に答える
0

h1デフォルトでは、 のdisplay値で表示されますblock。これを変更するには、次の CSS を使用します。

#banner .h1 {
    display: inline;
}
于 2012-05-15T18:17:33.037 に答える
0

<h1>elements はブロック レベルの要素です。非ブロック レベルの要素 (例: <span>) を選択するか、要素のスタイルを変更して<h1>を設定できdisplay:inline;ます。

元：

#banner h1.title {
    display: inline;
}

もう 1 つのオプションは、画像を<h1>タグ内に配置してから、画像の vertical-align プロパティを middle に設定することです。

<div id="banner">
  <h1 align="center" class="title">Sam Clark <img src="Images/twitter.png" width="35" height="35" alt="Twitter" id="twitter-img" style="vertical-align:middle" /></h1>
</div>​
于 2012-05-15T18:17:50.610 に答える