Home/ Questions/Q 7625187
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T05:09:31+00:00

I’m using the 1140 CSS grid and have a row with three cells like

  • 0

I’m using the 1140 CSS grid and have a row with three cells like so:

 <div class="row">
    <div class="span4"></div>
    <div class="span4">
       <p class="pText ui-highlight aCent">Some text.</p>
       <div data-role="controlgroup" data-type="horizontal">
           <a href="#" data-role="button" data-inline="true" data-theme="e" data-iconpos="none">data</a>
       </div>
    </div>  
    <div class="span4">
      <ul data-role="listview" data-inset="true" data-divider-theme="a" data-theme="c">
         <li data-role="list-divider" class="ui-corner-top input-divider"><span class="ui-divider-text">header</span></li> 
         <li data-icon="false" >Some<span class="ui-li-count pusher">12</span></li>
         <li data-icon="false" >Thing<span class="ui-li-count pusher">34</span></li>
         <li data-icon="false" >Wicked<span class="ui-li-count pusher">45</span></li>
      </ul>
   </div>
 </div>

I’m looking for a way to vertically center the three div.span4 elements and can’t get it to work…

I’m having this CSS from 1140:

  .row {
     margin: 0.5em auto;
     overflow: hidden;
     width: 100%;
     }
   .span4 {
     width: 28%;
     margin-right: 2%;
     }

Thanks for any tips. I’m going desperate here..

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Unless you know exactly how tall these <div>‘s will be (meaning you can set explicit heights), you can’t do this with plain vanilla CSS. Normal HTML “flow” has elements vertically aligned to the top – that’s just how it is.

    There are a couple ways to go now:

    1) Rethink your design. Do they really need to be vertically centered? Can a design be achieved with everything aligned at the top?

    2) Use JavaScript – using jQuery or something similar, you could get the height of the tallest .span4 and then calculate the necessary margins for the other <div>‘s. That gets messy, though, and obviously won’t work if someone has JS turned off.

    3) (I hate to suggest this) Try converting to tables. Yeah, it’s HTML circa 1998, but you can set a vertical-align attribute to table cells. It’s not semantic, and will be a pain to maintain, and all the Standaristas out there will laugh at you. ; )

    • 0