无法在打印预览中水平对齐图像

Question

我在浏览器中显示两个水平对齐的图像。我的目标是使用javascript打印它们，但是预览显示第二个图像位于第一个图像下面，就像它有一个新行一样。我需要的是水平对齐打印这些图片。我也尝试调整填充顶部以对齐它们但它不起作用。

<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

我的解决方案完全基于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>

Answer 2

您还可以使用以下属性。

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>