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

【问题标题】：Cannot horizontally align images in print preview无法在打印预览中水平对齐图像
【发布时间】：2018-08-30 16:28:11
【问题描述】：

我在浏览器中显示了两个水平对齐的图像。我的目标是使用 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 来调整布局。很抱歉错过了这些信息

【问题讨论】：

标签： html css alignment

【解决方案1】：

我的解决方案完全基于 css 。你可以看到我的 sn-p 。我希望它对你有帮助。

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

【讨论】：

【解决方案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>

【讨论】：