Search code examples
htmlcsslaraveldompdf

Laravel Barryvdh\DomPDF Inline block two different height div


I have a problem. I would like make a pdf, but I can not to make a simple flex and items-center on different height divs.

 <div style="margin-top: 20px; align-items: center">
        <div style="width: 70%; display: inline-block; text-align: right">Client: </div>
        <div style="width: 25%; display: inline-block; font-size: x-large" >Company shorted name</div>
 </div>

enter image description here


Solution

  • Okay, your problem is not really related to either Laravel nor DomPdf (Will adjust your tags :-)).

    This is however how you get the 2 elements centered; The center is exactly between the 2 child DIVs, so you might want to adjust that with giving them a certain size, istead of auto.

    <div style="margin-top: 20px; display: flex; justify-content: center;flex-direction: unset;width: 100%;align-items: center;">
      <div style="flex: 1;display: inline-block;text-align: right;">Client: </div>
      <div style="flex: 1;display: inline-block;font-size: x-large;">Company shorted name</div>
    </div>
    

    As reference you should have a look at this article https://love2dev.com/blog/absolute-centering-css/