Whats the best way to center vertically/horizontally allign multiple text lines in a <div>?


I've got a page that's made up of several colored <div>s arranged in blocks.
I've got a couple of fields data (name, price, quantity) that I need to display in each div.
I'd like this to appear on 3 lines of text.
I'd like these groups of fields to be centered both vertically and horizontally in each <div>.

What's the best way to do this?
Should I created a table that's vertically/horizontally centered within each <div>?

Is there a better/easier/cleaner way to do this?

jxbmaSoftware ConsultantAsked:
Who is Participating?
RobConnect With a Mentor Owner (Aidellio)Commented:
I'm sure i'll get berated by another expert BUT I always use tables for layouts where I need to have the tabular design.  Given that the <table> tag has been retained in the HTML5 spec it seems that someone else thinks they're ok as well. There's a place for <div> and a place for <table> elements but it's hard to know without seeing your current html markup .

I'm not sure i'm on the right track with this so please give me feedback on the following example.
Check container and grid system :
Tables are for tabular data. If you have tabular data (which you do) then use tables
tagit is right
COBOLdinosaurConnect With a Mentor Commented:
There ia this great misconception that "tables are bad".  Tables are not bad and never have been bad.

What is bad is using any element for the wrong purpose.  Using table to manage layout is bad.  Using tables for tabular data is good, and in fact using something else for tabular data is almost always going to be bad.

That said, when you run into this problem in the future and you are not working with tabular data, you can use CSS to apply some table attributes to other elements with display:table-cell which will allow you to do the vertical positioning within the box that you need.

jxbmaSoftware ConsultantAuthor Commented:
You guys rock.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.