Upload
andrew-jaswa
View
108
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
Vertical Centering for fun and profit
Vertical Centering for fun and profit
Andrew Jaswa@ajaswa
Hello!Hello!
Vertical CenteringVertical Centering
Fun+
Profit
Vertical CenteringVertical Centering
1. Vertical-center
2. ???
3. Profit
How we get to profit
Vertical CenteringVertical Centering
Where we started
Vertical CenteringVertical Centering
<font size=’50’> </font>
Centered?<font
size=’50’> </font>
Vertical CenteringVertical Centering
<br><br>
Centered?<br><br>
Vertical CenteringVertical Centering
<img src=‘spacer.gif’>
Centered?<img
src=‘spacer.gif’>
Vertical CenteringVertical Centering
<td valign=‘middle’>
Centered?</td>
Vertical CenteringVertical Centering
<td valign=‘middle’> (╯°□°)╯︵ ┻━┻
</td>
Vertical CenteringVertical Centering
Current Centering
Vertical CenteringVertical Centering.class { position: relative;}
.class .child { height: 100px; margin-top: -50px; position: absolute; top: 50%;}
Vertical CenteringVertical Centering
.class { height: 100px; }.class .child { margin: 40px 0 0;}
Vertical CenteringVertical Centering
.class { height: 50px; line-height: 50px;}
Vertical CenteringVertical Centering
New(ish) hottness
Vertical CenteringVertical Centering
.class { display: table; height: 100%;}.class .child { display: table-cell; vertical-align: middle;}
Vertical CenteringVertical Centering
Vertical CenteringVertical Centering.class:before { content: ‘’; display: inline-block; vertical-align: middle; height: 100%;}.class .child { display: inline-block; vertical-align: middle;}
Vertical CenteringVertical Centering
QuickTime™ and aGIF decompressor
are needed to see this picture.