CODEWITHSUNDEEP
htmlcss
Justin Pihony
Justin Pihony

Reputation: 67075

Vertical Alignment with spans

Maybe this has already been answered and I am searching incorrectly, but here is my problem. I have an MVC project where the view needs to look like a table. So, I am using a div with spans inside of it. My problem is that I need the data inside to be vertically centered. When I set my display to inline-block I cannot vertically align because some of the data may wrap and become two lines. So, this throws out using line-height. Then I tried to make my span display values to be table-cell. This works and I can use vertical-align:middle, however then I am unable to set a fixed width. And, I need this to look like a table, so the fixed width is required or else it looks horrible.

Here are my attempts thus far, and I know the css needs cleaned up, but I would rather fix this first atm.

http://jsfiddle.net/Scorpionb/ukMfX/ (The scrollbars cause the entire row to misalign)

http://jsfiddle.net/Scorpionb/QzFc3/(white-space:normal; and removed overflow to get rid of the scrollbars)

http://jsfiddle.net/Scorpionb/H6ATy/ (trying to treat it as a table)

Hopefully this makes sense, but I have run around so many circles now that I am losing track of what works and what does not. So, ask if you have any questions.

Also, this is an ASP MVC project, so I am tying each row of data to a form to be submitted and bound to a model

Upvotes: 0

Views: 86

Answers (1)

Wex
Wex

Reputation: 15695

You should really be using tables for tabular content.

You might also benefit cleaning up your CSS by using shorthand CSS. Some useful ones to get you started:

Upvotes: 1

Related Questions