CODEWITHSUNDEEP
csstwitter-bootstrap
Luiz Alves
Luiz Alves

Reputation: 2645

Vertical align with div into div using css

How could I make an vertical align of '10:00" and the gliphs on right side of thewe markup, into parent div? An optional horizontal align as well will be appreciated.

https://jsfiddle.net/DTcHh/39516/

//markup

<div class="container" style="outline: 1px solid orange;">
<div class="col-sm-10 bg-danger">
  <div class="col-sm-2 col-md-2 col-lg-2 bg-info">
    10:00
  </div>
  <div class="col-sm-10 col-md-10 col-lg-10">
    <div class="row">
      <div class="col-sm-12">
        Clique aqui para agendar
      </div>
      <div class="col-sm-12">
        Consulta
      </div>
      <div class="col-sm-12">
        Parando
      </div>
   </div>
  </div>
</div>
<div class="col-sm-2 " >
  <div><i class="pull-right glyphicon" class="glyphicon-chevron-down"></i>
    <i class="fa fa-lg fa-lock pull-right"></i>
    <i class="fa fa-lg fa-user pull-right"></i>
  </div>
</div>

//css

import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
body {
    margin: 10px;
}

Upvotes: 0

Views: 41

Answers (1)

VXp
VXp

Reputation: 12068

Add this to your styles:

.container,
.container > .col-sm-10 {
  display: flex;
  align-items: center;
}

Updated Fiddle

Upvotes: 1

Related Questions