Question

我在浏览器中显示了两个水平对齐的图像。我的目标是使用javascript打印它们，但预览显示第二张图片正好在第一张图片下方，好像它有新行一样。我需要的是将这些图片水平对齐打印。我也尝试过调整padding-top以使其对齐，但是它不起作用。

<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打印来调整布局。很抱歉错过了这些信息

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>

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

2 个答案: