Float div vertical align div

Question

Possible Duplicate:
Best practice vertical-align center content on div

How can I vertical align center .content for the both squares using same CSS.

Example

Thanks

You asked the same here: http://stackoverflow.com/questions/10968726/best-practice-vertical-align-center-content-on-div — floorish, Jun 10 '12 at 14:45
I want to vertical-align .content , but since I add float: left, stop working — Ricardo Rodrigues, Jun 10 '12 at 14:50
Your questions should be fully self-contained. Otherwise, when the URL goes dead, it's useless. And secondly, please don't post the [same question](http://stackoverflow.com/questions/10968726/best-practice-vertical-align-center-content-on-div) multiple times. — Sparky, Jun 10 '12 at 15:02

João Paulo Macedo · Answer 1 · 2012-06-10T15:38:39.473

1

Here's the solution -> http://jsfiddle.net/Sha6m/12/.

You need to add display: table-cell; to the inner .content, set their vertical-align to middle (vertical-align: middle;) and give them the same height and width of their parent .area (100% width and height unfortunately don't work here, so when you alter the .area's height and width, you also have to do it for the .content div).

edited Jun 10 '12 at 15:38

answered Jun 10 '12 at 15:17

João Paulo Macedo

15,297
4
31
41

score 0 · Answer 2 · answered Jun 10 '12 at 14:36

0

style='vertical-align:middle' ..

answered Jun 10 '12 at 14:36

nimrod

132
1
1
8

Check the example, it works without FLOAT, but want to know how to do it with Float. – Ricardo Rodrigues Jun 10 '12 at 14:38
mm.. margin-top? check it out – nimrod Jun 10 '12 at 14:55
But then is not a general css to apply to the div.content – Ricardo Rodrigues Jun 10 '12 at 14:59

score 0 · Answer 3 · edited Jun 10 '12 at 15:03

0

You're applying display table-cell to the wrong elements. You have to wrap them in a container, and apply display: table cell to that container. Check my example -> http://jsfiddle.net/Sha6m/10/

edited Jun 10 '12 at 15:03

Sparky

98,165
25
199
285

answered Jun 10 '12 at 14:58

João Paulo Macedo

15,297
4
31
41

Thanks , but I want to the div.content to be vertically center not the red squares. – Ricardo Rodrigues Jun 10 '12 at 15:01
@RicardoRodrigues Ain't the red squares are .content? um... may be you want to review your question :-/ – Edditoria Jun 10 '12 at 15:10
.content for the both squares --> its says in the question vertical align .content for the both squares – Ricardo Rodrigues Jun 10 '12 at 15:12

score 0 · Answer 4 · answered Jun 10 '12 at 15:49

0

When u got a fixed height i would just add a line-height: 100px; and remove your vertical-align and display

jsfiddle modification

answered Jun 10 '12 at 15:49

Dejan.S

18,571
22
69
112

Float div vertical align div

4 Answers4