Centering - Using line-height
~10 mins
Using line-height
- You can also use
line-heightto center vertically a single line of text inside a container
<div>Hello</div
div {
height: 200px;
line-height: 200px;
}
- That's quite ugly, but can be useful inside an element.
- The
line-heightproperty works only when the text to be centered spans a single line. - If the text wraps into multiple lines, the resulting output won't be centered.
Additional Articles
- Vertical align anything with 3 lines of code
- Centering in relation to another item
- Ghost element technique (MichaĆ Czernow's hack)
- Centering vertically and horizontally without worrying about height or width
- Vertically align an image inside div
- Centering with fixed size
- Vertically align dynamic height elements
- Horizontal and Vertical centering using table layout