时间戳

首页 > 解决方案 > 无法在打印预览中水平对齐图像

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

问题描述

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

标签： htmlcssalignment

解决方案

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

推荐阅读