How to align text in middle with CSS ?

You had try css text-align:center but this will not align the text center in vertically. To do that, you can try with different approach with only CSS and DOM element.

//css div { height: 100px; text-align: center; line-height: 100px; }

For the quick trick, you can insert line-height in your div value same as the height of the div. This will push the text to the middle of the DIV. But this only work with single line of text, if more then a line of text the text will fall out to the DIV.

Align with paragraph

You add in another layer / element to control the text. This solution will work for a single line or multiple lines of text. By adding a span tag to wrap the text together,so that you able to control by CSS.

//html <div> Your long text here.... </div> //CSS div { width: 300px; height: 100px; line-height 100px; text-align: center; } span { display: inline-block; vertical-align: middle; line-height: normal; }

The CSS just fixed the height and line-height of the DIV, and set the span CSS to line-height: normal this will reset all the text line-height in the span wrap. With this, you able to apply vertical-align: middle so its contents will flow naturally inside the block.

Using display table

This method are similar to the 2nd solution, in CSS 3 there are display: table to set the element to behave like table element, and in the span wrap you able to apply display: table-cell to set vertical-align: middle in CSS. This method will only work on modern broswer, it might not work in older version broswer.

//html <div> Your long text here.... </div> //CSS div { width: 300px; height: 100px; text-align: center; display: table; } span { display: table-cell; vertical-align: middle; }

With this few method you able to display your text in the middle of the DIV and with a paragraph text.