topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

basic-css-11-Examples-vertical-align-text-top-bottom.htm / htm



  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html>
          <head>
              <title></title>
              <style type='text/css'>
                  p {
                      background: cyan;
                      margin: 10px;
                      font-size: 16px;
                  }
                  span {
                      font-weight: bold;
                      background: lightblue;
                  }
                  span > span {
                      font-size: 40px;
                      color: white;
                      background: steelblue;
                  }
                  span + span {
                      font-size: 20px;   
                  }
                  span#text-top {
                      vertical-align: text-top;
                  }
                  span#top {
                      vertical-align: top;
                  }
                  span#text-bottom {
                      vertical-align: text-bottom;
                  }               
                  span#bottom {
                      vertical-align: bottom;
                  }
              </style>
          </head>
          <body>
              <p>
                  <span>
                      Peter Piper picked a peck of 
                          <span id='text-top'>pickled</span> 
                          <span id='top'>peppers.</span>
                  </span>
              </p>
              <p>
                  <span>
                      Did Peter Piper pick a peck of 
                          <span id='text-bottom'>pickled</span>
                          <span id='bottom'>peppers?</span>
                  </span>
              </p>
          </body>
      </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.