20
Vertical Centering for fun and profit Andrew Jaswa @ajaswa

Vertical centering

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Vertical centering

Vertical Centering for fun and profit

Vertical Centering for fun and profit

Andrew Jaswa@ajaswa

Page 2: Vertical centering

Hello!Hello!

Page 3: Vertical centering

Vertical CenteringVertical Centering

Fun+

Profit

Page 4: Vertical centering

Vertical CenteringVertical Centering

1. Vertical-center

2. ???

3. Profit

How we get to profit

Page 5: Vertical centering

Vertical CenteringVertical Centering

Where we started

Page 6: Vertical centering

Vertical CenteringVertical Centering

<font size=’50’>&nbsp;</font>

Centered?<font

size=’50’>&nbsp;</font>

Page 7: Vertical centering

Vertical CenteringVertical Centering

<br><br>

Centered?<br><br>

Page 8: Vertical centering

Vertical CenteringVertical Centering

<img src=‘spacer.gif’>

Centered?<img

src=‘spacer.gif’>

Page 9: Vertical centering

Vertical CenteringVertical Centering

<td valign=‘middle’>

Centered?</td>

Page 10: Vertical centering

Vertical CenteringVertical Centering

<td valign=‘middle’> (╯°□°)╯︵ ┻━┻

</td>

Page 11: Vertical centering

Vertical CenteringVertical Centering

Current Centering

Page 12: Vertical centering

Vertical CenteringVertical Centering.class { position: relative;}

.class .child { height: 100px; margin-top: -50px; position: absolute; top: 50%;}

Page 13: Vertical centering

Vertical CenteringVertical Centering

.class { height: 100px; }.class .child { margin: 40px 0 0;}

Page 14: Vertical centering

Vertical CenteringVertical Centering

.class { height: 50px; line-height: 50px;}

Page 15: Vertical centering

Vertical CenteringVertical Centering

New(ish) hottness

Page 16: Vertical centering

Vertical CenteringVertical Centering

.class { display: table; height: 100%;}.class .child { display: table-cell; vertical-align: middle;}

Page 17: Vertical centering

Vertical CenteringVertical Centering

Page 18: Vertical centering

Vertical CenteringVertical Centering.class:before { content: ‘’; display: inline-block; vertical-align: middle; height: 100%;}.class .child { display: inline-block; vertical-align: middle;}

Page 19: Vertical centering

Vertical CenteringVertical Centering

QuickTime™ and aGIF decompressor

are needed to see this picture.

Page 20: Vertical centering

Vertical CenteringVertical Centering

Thanks!

Andrew [email protected]