Skip to content

Instantly share code, notes, and snippets.

@bogdandynamic

bogdandynamic/vertical-aligned-cells.html

Created September 28, 2016 09:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bogdandynamic/e28ddc4964d9e8f29498f10e23058e88 to your computer and use it in GitHub Desktop.
Save bogdandynamic/e28ddc4964d9e8f29498f10e23058e88 to your computer and use it in GitHub Desktop.
Download ZIP
Make adjacent cells same height and vertical align content in both
Raw
vertical-aligned-cells.html
<style type="text/css">
.row {
display: table;
}
.row [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-2 col-md-2 col-lg-2" style="max-width:102px; vertical-align:middle;">
<!-- CONTENT -->
<img src="http://placehold.it/72x72">
</div>
<div class="col-xs-6 col-sm-4" style="vertical-align: middle;">
<!-- CONTENT -->
TEXT
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment