CODEWITHSUNDEEP
htmlcssresponsive-design
AGE
AGE

Reputation: 3792

Vertically center four responsive columns in css

I am attempting to create a 4 column layout in CSS. Each column is the same width and contains:

A. an image B. text related to the image.

These columns should collapse under each other one by one as the width of the screen shrinks; as well as expand back up to 4 columns next to each other when the screen expands. When all the columns have collapsed under each other (under mobile version screen widths) the columns should be centered in the screen rather than flushed to the right/left side of the screen.

The following snippet shows what I have so far:

<div class="sections">
    <div>
        <img src="http://placehold.it/110x110"/>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div>
        <img src="http://placehold.it/110x110"/>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div>
        <img src="http://placehold.it/110x110"/>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div>
        <img src="http://placehold.it/110x110"/>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>


.sections {
    display: table;
    margin: 0 auto;
}
.sections div {
    display: table-cell;
    padding: 0 0.5em 1em 0;
    text-align: center;
    vertical-align: center;
    width: 20em;
}

Upvotes: 0

Views: 226

Answers (1)

Sleek Geek
Sleek Geek

Reputation: 4686

If media queries won't help you just change .sections div display property value to inline-block.

.sections {
  display: table;
  margin: 0 auto;
}
.sections div {
  text-align: center;
  width: 20em;
  padding: 0 0.5em 1em 0;
  display: inline-block; /* Thats all you need */
  vertical-align: middle;
}
<div class="sections">
  <div>
    <img src="http://placehold.it/110x110" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div>
    <img src="http://placehold.it/110x110" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div>
    <img src="http://placehold.it/110x110" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div>
    <img src="http://placehold.it/110x110" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Upvotes: 2

Related Questions