CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsive-design
SirTophamHatt
SirTophamHatt

Reputation: 1581

How can I vertically align content in floated, fluid divs?

I'm floating an image next to a header in fluid divs using the 1140px Grid System like so:

<div class='row'>
  <div class='sixcol'>
    <img src='img/someImage.jpg'/>
  </div>
  <div class='sixcol last'>
    <h2>Large Header Text</h2>
  </div>
</div>

.row {
    width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.sixcol {
    margin-right: 3.8%;
    float: left;
    min-height: 1px;
}
.row .sixcol {
    48%;
}
.sixcol h2 {
       text-align: center;
 }
.last {
    margin-right: 0px;
}
img {
    max-width: 100%;
    height: auto;
}
@media handheld, only screen and (max-width: 767px) {
    .row {
       width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px;
   }
   .row .sixcol {
       width: auto; float: none; margin-left: 0px; margin-right: 0px;
   }
   .sixcol h2 {
       text-align: left;
    }
}

For smartphones, the header gets pushed under the image and aligns to the left of the container, while on desktop the desired effect is to always have the header to the right of the image and vertically centered to the expanding/contracting image height. Is there a way to do this using CSS and HTML only? Is there a simple JS/jQuery solution?

Upvotes: 0

Views: 528

Answers (1)

Thijs
Thijs

Reputation: 59

Use display:table-cell; on a div. The div will react like a table-cell so you can use your vertical-alignment.

Upvotes: 1

Related Questions