CSS - Center Two Images in CSS Side by Side

CSS - center two images in css side by side

Try changing

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

DEMO.

How can I center two images side-by-side with Bootstrap 3?

Add class text-center before img. like this

<div class="text-center">
  <img class="social" src="https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg">
  <img class="social" src="https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg">
</div>

DEMO HERE https://jsfiddle.net/ff9g43t8/

Centering multiple images in CSS side by side

You can use the almost same CSS, but with one simple correction, change:

vertical-align: middle;

And remove these:

display: inline-block;
position: relative;

There's no center here. It must be middle. Please correct it. And remove display: inline-block from the <div>. Your final code should be like:

#imagesMain {  padding: 0;  margin-left: auto;  margin-right: auto;  margin-top: 20px;  text-align: center;}#imagesMain img {  height: 400px;  width: 300px;  vertical-align: middle;}

<div id="imagesMain">  <img src="IMG_20140930_140020.jpg">  <img src="IMG_20140922_164619.jpg">  <img src="IMG_20140608_181811.jpg"></div>

How to vertically and horizontally center two images inside a div on a responsive page

Try this:

.container {  text-align: center;    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */  display: -ms-flexbox; /* TWEENER - IE 10 */  display: -webkit-flex;  display: flex;    justify-content: center;  flex-wrap: wrap;
  -webkit-box-align: center;  -webkit-flex-align: center;  -ms-flex-align: center;  -webkit-align-items: center;  align-items: center;
  height: 800px;}

<div class='container'>
   <img src="//placehold.it/300x300" class="thumbnail" alt="Sample Image">      <img src="//placehold.it/300x300" class="thumbnail" alt="Sample Image">
</div>

Centering two images side-by-side with captions

Use the HTML5 figure element to wrap each image and then add a figcaption element within each to conation your captions.

You can set the display property of the figures to inline-block to get them to appear adjacent to each other and then style them similarly to how you're currently styling the images with your .pic class.

(HTML) How can i have 2 images aligned next to each other and centered on the page?

.align-center {text-align: center; margin: auto;}

<div class="align-center">  <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-medium-landing-hero.ashx">  <img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/dog-medium-landing-hero.ashx"></div>

CSS - Center Two Images in CSS Side by Side