Question

This is the print preview我正在使用JavaScript函数来打印页面。但是打印预览出现对齐错误，我已经尝试过都使用链接标签以及@media打印。两者都不适合我。任何帮助都将非常有用。谢谢。

function ClickHereToPrint() {
    try {
        var printContent = document.getElementById('divToPrint').innerHTML;
        var windowUrl = 'about:blank';
        var uniqueName = new Date();
        var windowName = 'Print' + uniqueName.getTime();
        var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');
        printWindow.document.write(printContent);
        printWindow.document.close();
        printWindow.focus();
        printWindow.print();
        printWindow.close();
    }
    catch (e) {
        self.print();
    }
}

<div id="divToPrint">
    <div class="imgcontainer">
    <img align="left" hspace="15" src="Dotline/images/neridioLogo.png" alt="Edit" height="150" width="150">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
    </div>
    <br/>
    <h6 align="center"><b>Migrated Files</b></h6>
    <p align="center"> hell0.txt </p>
    <p align="center"> hell0.txt </p>
    <h6 align="center"><b>Failed Files</b></h6>
    <p align="center"> failed.txt </p>
    <p align="center"> failed.txt </p>
</div>

Answer 1

有很多方法可以使用HTML和CSS来实现所需的布局。

这是使用display:inline-block的一种方法：

.image,
.text {
  display: inline-block;
  vertical-align: top;
}

.image {
  margin: 0 2em 0 0;
}

.close {
  vertical-align: top;
  margin: 0 0 0 0.5em;
}

.text h6 {
  margin: 0;
  font-weight: bold;
}

<div id="divToPrint">
  <div class="image">
    <img src="https://picsum.photos/id/237/150/150" alt="Edit" height="150" width="150">
    <span class="close" title="Close Modal">&times;</span>
  </div>
  <div class="text">
    <h6>Migrated Files</h6>
    <p>hell0.txt</p>
    <p>hell0.txt</p>
    <h6>Failed Files</h6>
    <p>failed.txt</p>
    <p>failed.txt</p>
  </div>
</div>

这是使用flexbox的另一种方式：

#divToPrint {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.image {
  margin: 0 2em 0 0;
}

.close {
  vertical-align: top;
  margin: 0 0 0 0.5em;
}

.text h6 {
  margin: 0;
  font-weight: bold;
}

<div id="divToPrint">
  <div class="image">
    <img src="https://picsum.photos/id/237/150/150" alt="Edit" height="150" width="150">
    <span class="close" title="Close Modal">&times;</span>
  </div>
  <div class="text">
    <h6>Migrated Files</h6>
    <p>hell0.txt</p>
    <p>hell0.txt</p>
    <h6>Failed Files</h6>
    <p>failed.txt</p>
    <p>failed.txt</p>
  </div>
</div>

有关参考，请参见Learn to style HTML using CSS。

Answer 2

这是因为您使用了左侧的图像，并且如果要对齐徽标，则第一个<h6>和<p>标签的元素将位于该徽标图像之后的中心位置为<h6>和<p>元素赋予填充或边距

如何对齐打印页面的内容？

2 个答案: