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

Hi:

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?


Thanks,
JB
Text-Field-Alignment-in-Divs.png
LVL 1
jxbmaSoftware ConsultantAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (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.
http://jsbin.com/uziGaCU/2/edit
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leakim971PluritechnicianCommented:
Check container and grid system :
http://getbootstrap.com/css/#overview-container
0
GaryCommented:
Tables are for tabular data. If you have tabular data (which you do) then use tables
tagit is right
0
COBOLdinosaurCommented:
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.

Cd&
0
jxbmaSoftware ConsultantAuthor Commented:
You guys rock.

Thx,
JB
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.