Skip navigation
dLeeWhite
Currently Being Moderated

Vertical alignment

May 3, 2013 10:51 PM

Tags: #css_alignment

<div class="content">
  <div> (css attribute float : left)
    <img>
  </div>
  <div> (css attribute float : left)
    <table>  (I need this table to align vertically with the image.)
                 (vertical-align : middle   doesn't seen to do anything)
  </div>
</div>

 

I've tried encasing the table in another div and set THAT element to vertically align.
What am I missing?

 

Dana

 
Replies
  • Currently Being Moderated
    May 4, 2013 12:32 AM   in reply to dLeeWhite

    You are not being clear.

     

    Why do you need a table?

     

    Do you want to centre both the image and the table?

     

    Please supply more info, preferably a link to your site.

     
    |
    Mark as:
  • Currently Being Moderated
    May 4, 2013 1:44 PM   in reply to dLeeWhite

    Copy & paste this code into a new, blank document.   This layout uses CSS display:table properties to which you can add vertical-alignment.


    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Layout with Display:Table Properties</title>
    
    <style>
    body {
    font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size:100%;
    font-weight:bold;
    background: #FFF;
    width: 90%;
    margin: 45px auto;
    display: table;
    border: 4px solid #90F;
    /**optional rounded borders**/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    }
    
    section {
    display: table-row;
    background: #FFF;
    margin: 0;
    width: 100%;
    }
    
    aside.one {
    width: 33%;
    padding: 0 2%;
    background: #F60;
    color: #FFF;
    display: table-cell;
    vertical-align: top;
    }
    
    aside.two {
    width: 33%;
    padding: 0 2%;
    background: #9F0;
    color: #000;
    display: table-cell;
    vertical-align: bottom;
    }
    
    aside.three {
    width: 33%;
    padding: 0 2%;
    background: #F09;
    color: #FFF;
    display: table-cell;
    vertical-align: middle;
    }
    </style>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    <body>
    <header>This is header</header>
    <section>
    
    <aside class="one">
    <p>Aside .one has vertical-align:top. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Vestibulum gravida metus eu metus elementum in rhoncus nisi cursus. 
    Donec hendrerit condimentum ipsum, in sodales dui rhoncus non? 
    Nulla facilisi. Nulla porta, dolor et suscipit elementum, sem sem viverra 
    arcu, et aliquam elit leo porttitor urna. Praesent tristique lacus a metus 
    pharetra quis pharetra sapien laoreet. Nam tempor pharetra magna nec luctus.</p>
    </aside>
    
    <aside class="two">
    <p>Aside .two has vertical-align:bottom.</p>
    </aside>
    
    <aside class="three">
    <p>Aside .three has vertical-align:middle.</p>
    </aside>
    
    </section>
    
    <footer>This is footer</footer>
    
    </body>
    </html>

     

     

    Here's a screenshot:

     

    Display-Table.jpg

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points