CSS: centre dos imágenes en css una al lado de la otra

Question

Estoy tratando de centrar dos imágenes una al lado de la otra, pero por alguna razón siempre muestra las imágenes una debajo de la otra. ¿Alguien sabe cómo puedo ponerlos centrados y al lado el uno del otro?

Gracias!

código 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>` 

código CSS

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

Answer 1

Intente cambiar

#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

No se puede tener dos elementos con el mismo ID.

Aparte de eso, los está definiendo como elementos de bloque, es decir (en términos sencillos) que están obligados a aparecer en su propia línea.

lugar, trate de algo como esto:

<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

que acabo de hacer esto para un proyecto, y ha logrado mediante el uso de la etiqueta h6, que no estaba usando para otra cosa:

en código 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> 

El espacio entre las etiquetas de imagen ponen un espacio vertical entre las imágenes. El argumento de ancho en cada etiqueta img es opcional, pero ordena las imágenes para llenar el ancho de la página. Tenga en cuenta que cada imagen debe configurarse para ocupar solo el 50% del ancho. (O 33% si está usando 3 imágenes.) El argumento de ancho debe venir después de los argumentos alt y src o no funcionará.

en el código 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; 
    } 

Los elementos de texto conjunto el aspecto del texto de la leyenda, y los centros de propiedad text-align tanto las imágenes como el texto del título.

Answer 4

Flexbox puede hacer esto con solo dos reglas css en un div circundante.

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