Center content horizontally and vertically in a fixed Dimensional div

Question

I want to have content as below
for this first i used a line height of 40px

for the second I used line-height 120px

This means that when changing the content I need to change the line height. Is there a way to do this type of centering in a fixed dimensional div without changing the class

Can I do this without Javascript? If I use height like 120px, I get div s like this (I don't want this)

div style -

<style> .rectangle { postion:absolute; box-shadow: 10px #333; border-radius: 23px; border-top-right-radius: 0; border:6px solid; block:inline; line-height: 123.6px; width:200px; background-color: #444; float: left; margin: 5px; text-align: center; color:white; font-weight:900; text-decoration:none; } </style> 

Answer 1

Vertical centering is difficult. Chris Coyer in CSS tricks has an excellent article on this - http://css-tricks.com/centering-in-the-unknown/

My personal preference is a pseudo-ghost element, but it is only viable in IE8 +, so you might need to consider some of the other examples if you need previous IE support.

Here's a working fiddle - http://jsfiddle.net/tommarshall/eGJQC/3/

Answer 2

Create a .rectangle element that will be displayed in the form of a table, and a paragraph of internal text that will be displayed as a table cell. Then you can easily vertically position your paragraph.

Here is a working example: http://jsfiddle.net/ktzUn/

Answer 3

after css works correctly even if the height and content in the div change

 .rectangle { height:auto; postion:absolute; box-shadow: 10px #333; border-radius: 23px; border-top-right-radius: 0; border:6px solid; block:inline; width:200px; background-color: #444; float: left; padding:20px 10px 20px 10px; margin: 5px; text-align: center; color:white; font-weight:900; text-decoration:none; } 

Answer 4

Vertical alignment only works fine in the table> tr> td. for others, you can also try filling in the top and bottom. which does not need vertical alignment and will work best.

Thanks Rahul