Vertical align middle not working in span element

  • A+
Category:Languages

vertical-align:middle property is not working in span element. I have tried to place the text center- and middle-aligned in span element. I have tried the following code:

span {   text-align: center;   vertical-align: middle; /* Not working */   height: 150px;   width: 150px;   border: 1px solid black;   display: block; }
<span>center</span>


You can use display: flex to achieve this.

span {   height: 150px;   width: 150px;   border: 1px solid black;   display: flex;   align-items: center;   justify-content: center; }
<span>center</span>

vertical-align: middle will not work with display: block

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: