Невозможно выровнять изображения по горизонтали при предварительном просмотре

Question

У меня есть два изображения, показанные в браузере, который выровнен по горизонтали. Моя цель состоит в том, чтобы напечатать их, используя javascript, однако предварительный просмотр показывает, что 2-е изображение идет под первым изображением, как будто оно имеет новую строку. Что мне нужно, это распечатать эти картинки по горизонтали. Я также попытался отрегулировать верхний слой, чтобы выровнять их, но это не работает.

<img id = "telin_logo" class="responsive-img" src="img/telin.jpg" style="width: 133px;height: 77">
<img id = "telin_logo2" class="responsive-img" src="img/telin.jpg" style="width: 133px;height: 77px;">

Под печатью я подразумеваю печать на принтере. я использовал @media print для настройки макета. извините за упущение этой информации

Answer 1

Вы также можете использовать следующие свойства.

div {
  width: 100%;
  height: 77px;
  border: 1px solid gray;
  display: flex;
  align-items: flex-start;
  text-align: center;
  margin: 0 auto;
}

img {
  align-self: center;
  margin: 0 auto;
}

<div>
  <img src="http://placehold.it/133x77/CCCCCC&text=telin_logo">
  <img src="http://placehold.it/133x77/CCCCCC&text=telin_logo2">
</div>

Answer 2

мое решение основано исключительно на CSS. Вы можете увидеть мой фрагмент. Я надеюсь, что это поможет вам.

.container{
    width:100%;
    border:1px solid #222;
    position:relative;
    height:100%;
}
body,html{
    height:100%;
    width:100%;
}
.left{
    width:50%;
    float:left
}
.right{
    width:50%;
    float:left;
}

<div class="container">
<div class="left">
<p style="text-align:center"><img src="red.png"/></p>
</div>
<div class="right">
<p style="text-align:center"><img src="red.png"/></p>
</div>
</div>