CSS - 2つの画像をCSSの中心に並べる

Question

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

Answer 1

は

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

#images{ 
    text-align:center; 
} 

に

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

を変更してみてください

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

DEMO。

私はプロジェクトのためにこれをやって、私は何か他のもののために使用していませんでしたH6タグ使用することによって、それを達成した

Answer 2

あなたは同じ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; 
} 

Answer 3

：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; 
    } 

テキスト項目は、キャプションテキスト、及びテキスト-alignプロパティセンター両方の画像と字幕テキストの外観を設定します。

Answer 4

フレックスボックスでは、周囲のdivの2つのCSSルールでこれを実行できます。

.social-media{ 
 
    display: flex; 
 
    justify-content: center; 
 
}

<div class="social-media"> 
 
<a href="mailto:olympiahaacht@hotmail.com"> 
 
<img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.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>