Aligning a Span inside a Div

Being from a Asp.NET background, I never took much interest in designing HTML pages. Recently, I started learning HTML to get a deeper insight into the problems faced when converting a photo shop design to HTML code.
In the coming few weeks, I'll share some issues and their solutions faced in my HTML learning journey. The issues might be trivial but would be useful to some one who's just started learning HTML and CSS.

The present issue is how to align a span inside a div. Have a look at the below shown codepen. I'm trying to align the span with text Tech Illumination to the center of the parent div.

See the Pen WbWyZE by Jay (@jay3dec) on CodePen.



The solution to the above problem is line-height. The line-height property sets equal space, above and below the element. Suppose if I set line-height:50px; then 25px space will be set above and below the particular element. Here is the corrected demo.

See the Pen EaJRwr by Jay (@jay3dec) on CodePen.

Post a Comment