How to align text vertically?

Question

What is the easiest way to align text vertically here with CSS?

<ul> <li>Hello</li> <li>Bye Bye</li> <li>Ciao</li> </ul> li { border: 1px solid black; width: 100px; height: 50px; margin-bottom: 20px; text-align: center; } 

Answer 1

If you have only one line of text, you can set line-height to the same value as height . This works for any item.

Answer 2

Hacky, but perhaps the easiest way:

 li { display: table-cell; vertical-align: center; } 

You need to add a background image instead of a list item marker.

Answer 3

If you know that you will always center a single line , you can match the height and line-height

 li { ... height: 50px; line-height: 50px; ... } 

Answer 4

Try the vertical-align property:

http://www.w3schools.com/css/pr_pos_vertical-align.asp

Answer 5

Set the line height and create a gap between the text and the border. but this is not the best practice. because the line height is not intended to create a field or fill. It is intended to create a gap between two text lines (a gap between two lines of a paragraph).

So, for your task to be completed, you need to place a margin or addition. The best option is to add margin (but this is not alignment, just point the margin up). Also add text to the p tag or span tag (regardless of the tag that can be used to wrap text).

HTML code

 <ul> <li><span>Hello</span></li> <li><span>Bye Bye</span></li> <li><span>Ciao</span></li> </ul> 

CSS code

 ul li span { margin-top: 5px; } 

If vertical alignment is required, here is the code.

  ul li { position: relative; } ul li span { position: absolute; top: 50%; font-size: 12px; /* change this as your need. */ line-height: 12px; /* keep this value same as font-size. */ margin-top: -6px; /* half value from the font-size. */ }