无法在打印预览中水平对齐图像
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无法在打印预览中水平对齐图像相关的知识，希望对你有一定的参考价值。
我在浏览器中显示两个水平对齐的图像。我的目标是使用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来调整布局。很抱歉错过了这些信息
答案
我的解决方案完全基于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>另一答案
您还可以使用以下属性。
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>以上是关于无法在打印预览中水平对齐图像的主要内容，如果未能解决你的问题，请参考以下文章