'How to align a span element vertically center inside a div? [duplicate]

I am trying to align a span vertically centered. But its not working.

Here is my code:

<div style="height:150px; width:100%;">
  <div style="height:150px;width:150px;;background-color:blue;display: inline-block;">
    <!--                    <div class="text-center" style="float:center;">-->
    <img style="width:100%;float:left;height:100%;" t-att-src="'data:image/png;base64,%s' % to_text(o.company_id.header_image)" />
    <!--                    </div>-->
  </div>
  <div style="height:150px;width:400px;float:right;background-color:red;display: inline-block;">
    <!--                    <div class="text-center" style="float:center;">-->
    <span style="font-size:40px;vertical-align:middle;padding-top:70% !important;padding-left:16%;"><b>Purchase Order</b></span>
    <!--                    </div>-->
  </div>
</div>

Actually, i am converting above code to pdf instead html rendering using wkhtmltopdf.

htmlcsswkhtmltopdf


Solution 1:[1]

Use display:flex;, align-items:center; on parent div and display:inline-block; on span element to make it an actual block element.

<div style="height:150px; width:100%;">
  <div style="height:150px;width:150px;;background-color:blue;display: inline-block;">
    <img style="width:100%;float:left;height:100%;" t-att-src="'data:image/png;base64,%s' % to_text(o.company_id.header_image)" />
  </div>
  <div style="height:150px;width:400px;float:right;background-color:red;display: flex;align-items:center;">
    <span style="display:inline-block;font-size:40px;vertical-align:middle;padding-left:16%;"><b>Purchase Order</b></span>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 George Chond

Related Questions