Home Vertical Center on responsive layout
Reply: 0

Vertical Center on responsive layout

user1207
1#
user1207 Published in May 21, 2018, 6:51 pm

I am using the class .vertical-align-center on a content div inside a bootstrap 3 column.

If the height of the column is fixed, so it is bigger than the content height, or if the other column in the same row has bigger content that makes the height bigger than the content, all works fine.

But on smaller devices, I have the column width set to 12, so the column has a fluid height that is the same as the content. This makes the content go off -50% from the top instead.

Any ideas how to solve this?

.vertical-align-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
<div class="column col-xs-12 col-sm-12 col-md-6 col-lg-6">
  <div class="column-content vertical-align-center">
    <h3>Heading</h3>
    <p>Some text</p>
  </div>
</div>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.310979 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO