如何對齊打印頁面的內容？

Question

這是打印預覽我正在使用javascript函數來打印頁面。 但是打印預覽有對齊錯誤，我嘗試使用鏈接標記和@media打印。 兩者都不適合我。 任何和所有的幫助都會很棒.Thankyou。

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的一種方式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> 

有關參考，請參閱了解如何使用CSS設置HTML樣式 。

Answer 2

這是因為您在左側使用的圖像，並且元素第一個<h6>和<p>標記在該徽標圖像之后獲取中心的位置如果您想要對齊它，則必須為兩者添加填充或邊距<h6>和<p>元素