Question

我怎样才能将'10：00'和我们标记右侧的gliphs垂直对齐成父div？可选的水平对齐也将受到赞赏。

//标记

<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;
}

Answer 1

将此添加到您的样式中：

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

documentation

使用css将div与div垂直对齐为div

1 个答案: