使用“边距：自动和显示块”将图像居中时出现问题，并使用FlyingSaucer（Itext5）从XHTML解析为PDF

Question

I'm trying to parse an xhtml with a centered image to PDF using FlyingSaucer.

The image is centered using css :

 img.center {
    display: block;
    margin-bottom: 1px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1px;
}

and is perfectly centered when displayed on a browser. codePen link

Thing is, when I try to create a PDF using the same xhtml file and the FlyingSaucer Library : image is not longer centered.

 PDFRenderer.renderToPDF(htmlFile, "pdf_file.pdf");

I've tryed a few different approach but none seem to be working fine.

The only approach that worked for me was adding a width attribute to the img.

However, the xhtml is an input provided by a external web service and it can't be changed .

Adding the width attribute post reception of the file is doable but very dirty (you can find the sample code in the github repository below)

Do you have an idea on how to display this image the same way in PDF than on a browser without changing the html or css ?

Source project

https://github.com/Shask/FlyingSaucerXHTMLToPdfBug

PS : I'm happy to change parsing library, so Far I've tryed different version of FlyingSaucer (using Itext5 and the other using OpenPDF)

Answer 1

Some update :

As of yet, I've tried a few java libraries to do the job.

It seems that only Itext7 can get a good result on a PDF out of the box.

You can find detailed result on github .