CSS - центр двух изображений в css бок о бок

Я пытаюсь центрировать два изображения бок о бок, но по какой-то причине он всегда отображает изображения друг под другом. Кто-нибудь знает, как я мог бы их сосредоточить и рядом друг с другом?

Спасибо!

HTML-код

<a href="mailto:[email protected]">
<img id="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg"/></a>
<a href="#" onclick="location.href='https://www.facebook.com/OlympiaHaacht'; return false;" 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; 
}

ОТВЕТЫ

Ответ 1

Попробуйте изменить

#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:[email protected]">
    <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.

Ответ 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;
}

Ответ 3

Я только что сделал это для проекта и достиг этого, используя тег 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>

Пространство между тегами изображений помещает вертикальный промежуток между изображениями. Аргумент width в каждом теге img является необязательным, но он аккуратно изменяет размеры изображений для заполнения ширины страницы. Обратите внимание, что для каждого изображения должно быть установлено только 50% ширины. (Или 33%, если вы используете 3 изображения.) Аргумент 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 - как изображения, так и текст подписи.

Ответ 4

Flexbox может сделать это только с двумя правилами css на окружающем div.

.social-media{
    display: flex;
    justify-content: center;
}
<div class="social-media">
<a href="mailto:[email protected]">
<img class="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a>
<a href="#" onclick="location.href='https://www.facebook.com/OlympiaHaacht'; return false;" target="_blank">
<img class="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a>
</div>