html - Vertical align button in the middle of the column- bootstrap -


i using bootstrap , trying vertically align button in column.

note : cant use flex , can't define height per standards.

if use margins won't work in tablet , mobile devices.

so below code :

.col-xs-2, .col-xs-6 {     display: inline-block;  }  .col-xs-2 {      vertical-align: middle;         }
<div class="container">      <div class="row">      <div class="col-xs-4">               <h4>some large label wrap multiple lines in small screens</h4>            </div>      <div class="col-xs-6">               <h4>some large label wrap multiple lines in small screens</h4>            </div>          <div class="col-xs-2">              <button class="btn" style="color: #660066;"> <i class="fa fa-arrow-left" data-ng-click="onclickback()"></i>                </button>          </div><!--        -->      </div>  </div>

js fiddle link:

so question how can make arrow button align middle of row.
have tried : display:table-cell , display: inline-block; nothing seems work. missing something?

borrowing different cases of problem , source code mentioned on link here.

check working fiddle support different media well: here

html :

<div class="container">   <div class="row">     <div class="row-height">       <div class="col-xs-4 col-height">         <div class="inside">           <div class="content">             <h4>some large label wrap multiple lines in small screens</h4>           </div>         </div>       </div>       <div class="col-xs-6 col-height col-middle">         <div class="inside">           <div class="content">             <h4>some large label wrap multiple lines in small screens</h4>           </div>         </div>       </div>       <div class="col-xs-2 col-height col-middle">         <div class="inside">           <div class="content">             <button class="btn" style="color: #660066;"> <i class="fa fa-arrow-left" data-ng-click="onclickback()"></i>             </button>           </div>         </div>       </div>     </div>   </div> </div>

css :

  .inside {   background: #ffffff; } .content {   padding: 12px 3px; } .row-height {   display: table;   table-layout: fixed;   height: 100%;   width: 100%; } .col-height {   display: table-cell;   float: none;   height: 100%; } .col-top {   vertical-align: top; } .col-middle {   vertical-align: middle; } .col-bottom {   vertical-align: bottom; } @media (min-width: 480px) {   .row-xs-height {     display: table;     table-layout: fixed;     height: 100%;     width: 100%;   }   .col-xs-height {     display: table-cell;     float: none;     height: 100%;   }   .col-xs-top {     vertical-align: top;   }   .col-xs-middle {     vertical-align: middle;   }   .col-xs-bottom {     vertical-align: bottom;   } } @media (min-width: 768px) {   .row-sm-height {     display: table;     table-layout: fixed;     height: 100%;     width: 100%;   }   .col-sm-height {     display: table-cell;     float: none;     height: 100%;   }   .col-sm-top {     vertical-align: top;   }   .col-sm-middle {     vertical-align: middle;   }   .col-sm-bottom {     vertical-align: bottom;   } } @media (min-width: 992px) {   .row-md-height {     display: table;     table-layout: fixed;     height: 100%;     width: 100%;   }   .col-md-height {     display: table-cell;     float: none;     height: 100%;   }   .col-md-top {     vertical-align: top;   }   .col-md-middle {     vertical-align: middle;   }   .col-md-bottom {     vertical-align: bottom;   } } @media (min-width: 1200px) {   .row-lg-height {     display: table;     table-layout: fixed;     height: 100%;     width: 100%;   }   .col-lg-height {     display: table-cell;     float: none;     height: 100%;   }   .col-lg-top {     vertical-align: top;   }   .col-lg-middle {     vertical-align: middle;   }   .col-lg-bottom {     vertical-align: bottom;   } } body {   padding-bottom: 40px; } h1 {   margin: 40px 0px 20px 0px;   color: #95c500;   font-size: 28px;   line-height: 34px;   text-align: center; } [class*="col-"] {   border: none;   background: #ffffff; } html, body {   width: 100%;   height: 100%; } html {   display: table; } body {   display: table-cell;   vertical-align: top; }

Comments

Post a Comment

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

Image
i have script tag in code, keyboard shortcut comment/uncomment script tag in sublime. after selecting script open , close tag. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> i pressing ctrl + shift + / , getting this /*<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>*/ also pressed ctrl + / , got this // <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> // </script> instead of <!-- <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> --> script open , close tag in 2 lines not in 1 line , not have spaces too. for mac,high light lines want comment. hold 'command , / ' commented. for windows: high line or select lines ,then hold ctrl + / if not work: ...
Read more

post - imageshack API cURL -

i credentials correct. when send image through form this:(action="http://api.imageshack.com/v2/images/"). working fine when tried send $ch = curl_init($url); failed. code: enter code here <form action="" method="post" enctype="multipart/form-data"> select image upload: <input type="file" name="file" id="file" multiple> <input type="text" name="auth_token" id="auth_token" value="xxxxxxxxxxxxxxxx"> <input type="text" name="api_key" id="api_key" value="xxxxxxxxxxxxxxx"> <input type="submit" value="upload image" > </form> $url = ' http://api.imageshack.com/v2/images/ '; $temp = $_files["file"]['tmp_name']; echo $temp."<br>" ; $ch = curl_init($url); curl_setopt($ch, curlopt_post, true); curl...
Read more

dataset - MPAndroidchart returning no chart Data available -

i having problems mpandroidchart. adding temperature , humidity data chart, displays "no chart data available". here can see bug is? super grateful! //create data //set size of data int size = list.size(); if (size > 24){ size = 24;} //create lists form temp , hum arraylist<entry> temps = new arraylist<entry>(); arraylist<entry> hums = new arraylist<entry>(); //fill list temp values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).temp), (size-i)); temps.add(value); } //fill list hum values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).hum), (size-i)); hums.add(value); } ...
Read more