How to align this text in center on vertically?

Question

I have this sample:

CODE HTML:

<div class="container">
  <div class="row">
    <div class="col-sm-6">
    <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="500x500" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzUwMHg1MDAvYXV0bwpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1NzUwYTE1ZWNjIHRleHQgeyBmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MjVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTU3NTBhMTVlY2MiPjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjRUVFRUVFIi8+PGc+PHRleHQgeD0iMTg1LjEyNSIgeT0iMjYxLjEiPjUwMHg1MDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
    </div>
    <div class="col-sm-6">text align verticaly</div>
  </div>  
</div>

CODE CSS:

.col-sm-6{
  background:red;
}

Basically I want my text to be aligned in the middle (but vertically). How can I do this inside a bootstrap div?

It's kind of hard to understand exactly what you want to do with the provided sample. — Reality-Torrent, Sep 22 '16 at 08:57
This will do. http://stackoverflow.com/questions/39609175/css-position-on-web-page/39609917#39609917 — Safal Pillai, Sep 22 '16 at 08:58

score 1 · Answer 1 · answered Sep 22 '16 at 08:57

Reading the height of the div, then apply the height fixed and add the line-height with the same value. This works for your purposes?

your text here to align it vertically

</div>

<script>
$(document).ready(function(e) {
    var vaheight = $('#sample').height();
    $('#sample').css('height', vaheight);
    $('#sample').css('line-height', vaheight);
});
</script>

This will work in any device so it reads the height of the div after load, so if in a smartphone the div takes 300px (height) will read 300px and the same on a PC may takes 120px and it will read 120px.

score 1 · Answer 2 · answered Sep 22 '16 at 08:57

PURE CSS SOLUTION

The simplest way for solving this issue is by using table. Give .disp-table class to row and .disp-table-cell class to child, .col-sm-6 in your case

.disp-table{
  display: table;
  width: 100%;
}

.disp-table-cell{
  display: table-cell;
  vertical-align: middle;
  float: none;
}

.col-sm-6{
  background:red;
}
.disp-table{
  display: table;
  width: 100%;
}

.col-sm-6.disp-table-cell{
  display: table-cell;
  vertical-align: middle;
  float: none;
  color: #fff;
  text-align: center; // to horizontal align
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row disp-table">
    <div class="col-sm-6 disp-table-cell">
    <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="500x500" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzUwMHg1MDAvYXV0bwpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1NzUwYTE1ZWNjIHRleHQgeyBmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MjVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTU3NTBhMTVlY2MiPjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjRUVFRUVFIi8+PGc+PHRleHQgeD0iMTg1LjEyNSIgeT0iMjYxLjEiPjUwMHg1MDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
    </div>
    <div class="col-sm-6 disp-table-cell">text align verticaly</div>
  </div>  
</div>

How to align this text in center on vertically?

2 Answers2