flexbox_item-vertical-align.html (697B)
1 <!DOCTYPE html> 2 <title>flexbox | vertical-align</title> 3 <link rel="author" href="http://opera.com" title="Opera Software"> 4 <link rel="help" 5 href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> 6 <link rel="match" href="flexbox_item-vertical-align-ref.html"> 7 <style> 8 div { 9 background: yellow; 10 border: 1px solid black; 11 width: 600px; 12 13 display: flex; 14 } 15 p { 16 background: #3366cc; 17 margin: 2em; 18 width: 2em; 19 height: 2em; 20 } 21 #one {vertical-align: bottom;} 22 #two {vertical-align: top;} 23 #three {vertical-align: middle;} 24 #four {vertical-align: super;} 25 #five {vertical-align: sub;} 26 </style> 27 28 <div> 29 <p id="one"></p> 30 <p id="two"></p> 31 <p id="three"></p> 32 <p id="four"></p> 33 <p id="five"></p> 34 </div>