CSS: centra due immagini in cs affiancate

Question

Sto provando a centrare due immagini affiancate, ma per qualche motivo mostra sempre le immagini una sotto l'altra. Qualcuno sa come potrei ottenerli centrati e uno accanto all'altro?

Grazie!

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

codice CSS

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

Answer 1

Provare a cambiare

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

a

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

DEMO.

Answer 2

Non è possibile avere due elementi con lo stesso ID.

A parte questo, li definisci come block elemnts, intendendo (in parole povere) che sono costretti a comparire sulla loro stessa linea.

Invece, provare qualcosa di simile:

<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

Ho appena fatto questo per un progetto, e ha raggiunto esso utilizzando il tag H6, che non stavo usando per altri scopi:

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

Lo spazio tra i tag immagine creano uno spazio verticale tra le immagini. L'argomento della larghezza in ogni tag img è facoltativo, ma dimensiona in modo ordinato le immagini per riempire la larghezza della pagina. Si noti che ciascuna immagine deve essere impostata per occupare solo il 50% della larghezza. (O 33% se stai usando 3 immagini.) L'argomento della larghezza deve venire dopo gli argomenti alt e src o non funzionerà.

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

Gli elementi di testo impostare l'aspetto del testo della didascalia, ei centri di proprietà text-align sia le immagini e il testo della didascalia.

Answer 4

Flexbox può farlo con solo due regole CSS su un div circostante.

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