Problem with horizontal centering a div
Hi,
I would like to center a div containing svg horizontally on the page.
I set the svg element to "display:block" and use "margin-left" and "margin-right" set to "auto".
Looking at the page that is fed into Prince in Chrome is does look good, the resulting PDF however has the div left aligned.
The element is not in a table, I'm using Bootstrap's grid system, and the content is in a full width cell, spanning the whole viewport width.
Is there something I need to do special to make it work? The Prince version I'm using is 10 rev 2
Thanks,
Torsten.
Does the div have width set explicity? I wonder whether the difference is that Chrome is getting the width from the SVG and that Prince is using the rules for width:auto. It might help to attach the document, or a simplified example.
The svg sets a specific width to 500px. Other fixed width are not specified.
I attached the part of the html report that includes the svg element. I apologize, I didn't yet manage to create a pdf from the simplified report.
But, reading your answer I would assume that what I did should actually work with prince and I probably messed up somewhere along the way?
Thanks,
Torsten.
- report_part.html 3.9 kB
report_part.html as attached above is left-aligned in Chromium. You might well need to include the document styling (any <style> elements, and the documents referred to by <link rel="stylesheet"> elements in <head>, or by @import rules in this styling).
To get things working straight away, add an explicit style="width:500px" attribute to the div that you want centred.
I found the problem. To generate the svg charts I use an AngularJS template. We then extract the charts from that page and implant it into the report page rendered by Prince.
In AngularJS you can basically add your own attributes to html tags to pass data in. One of these I named "width". So in the end there was a div with a "width" attribute, Prince seems to interpret this (in contrast to Chrome) and constrained the width of the outer element. So the svg was centered, but only within a smaller container, which in turn was left aligned.
Once I renamed the attribute all worked well.
Thanks,
Torsten.
Ah, thanks for looking into that.
As it happens, I've already written up a change that would (to judge from your description) make Prince output match Chrome's for this example, but the change hasn't yet made its way into builds.
