How to set vertical span alignment to mid div

Question

I am testing vertical alignment with simple html code but it does not work

<div style="height:45px; border: solid 1px black;"> <strong style="vertical-align:bottom;"> abc </strong> </div> 

Answer 1

This is how you do it

 <div style="height:45px; border: solid 1px black; display: table;"> <strong style="vertical-align:bottom; display: table-cell;"> abc </strong> </div> 

Demo

As I mentioned earlier, vertical alignments are very complex. To do this, as in the table, set the parent container to display as table , and the internal <div> or elements will be displayed as table-cell

Answer 2

Give the parent block (in your case div ) the properties height , display: table-cell and vertical-align: middle . Here is an example:

 <div style="height:100px; border: solid 1px black; vertical-align:middle;display:table-cell;"> <span style="">abc</span> </div>