29

2つの画像を並べて中央に配置しようとしていますが、何らかの理由で常に画像が互いに下に表示されます。誰かが私がそれらを中央に配置して互いに隣接させる方法を知っていますか？

ありがとう！

HTMLコード

<a href="mailto:olympiahaacht@hotmail.com">
<img id="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg"/></a>
<a href="https://www.facebook.com/OlympiaHaacht" target="_blank">
<img id="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a>`

CSSコード

#fblogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}
4

5 に答える 5

74

変更してみてください

#fblogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}

に

.fblogo {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}

#images{
    text-align:center;
}

HTML

<div id="images">
    <a href="mailto:olympiahaacht@hotmail.com">
    <img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg"/></a>
    <a href="https://www.facebook.com/OlympiaHaacht" target="_blank">
    <img class="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a>
</div>​

デモ。

于 2012-08-05T19:33:32.500 に答える
6

同じIDを持つ2つの要素を持つことはできません。

それとは別に、あなたはそれらをブロック要素として定義しています。これは、（素人の用語では）それらが独自の行に表示されることを強制されていることを意味します。

代わりに、次のようなものを試してください。

<div class="link"><a href="..."><img src="..."... /></a></div>
<div class="link"><a href="..."><img src="..."... /></a></div>

CSS：

.link {
    width: 50%;
    float: left;
    text-align: center;
}
于 2012-08-05T19:33:06.167 に答える
-2

プロジェクトでこれを行ったところ、他には使用していなかった h6 タグを使用して達成しました。

HTMLコードで：

<h6><img alt="small drawing" src="../Images/image1.jpg" width="50%"/> <img alt="small drawing" src="../Images/image2.jpg" width="50%"/><br/>Optional caption text</h6>

イメージ タグ間のスペースは、イメージ間に垂直方向のギャップを置きます。各 img タグの width 引数はオプションですが、ページの幅に合わせて画像のサイズを適切に調整します。各画像は、幅の 50% のみを占めるように設定する必要があることに注意してください。(または、3 つの画像を使用している場合は 33% です。) width 引数は、alt および src 引数の後に指定する必要があります。そうしないと、機能しません。

CSSコードで：

/* h6: set presentation of images */
h6
  {
  font-family: "Franklin Gothic Demi", serif;
  font-size: 1.0em;
  font-weight: normal;
  line-height: 1.25em;
  text-align: center;
  }

テキスト項目はキャプション テキストの外観を設定し、text-align プロパティは画像とキャプション テキストの両方を中央揃えにします。

于 2014-09-05T08:42:39.317 に答える