中间对齐div包含glyphicons和breadcrumb

Question

我有一个Bootstrap行，其中包含4个div，可以通过更改屏幕大小来隐藏/推/拉。下面的HTML和CSS代码：

<div class="row" id="dtRow">
    <div class="hidden-md hidden-lg col-xs-1 dtRowCols" id="dtCol0">
        <div class="glyphicon glyphicon-cog" id="chCity"></div>
    </div> 
    <div class="col-xs-11 col-md-4 col-md-push-4 dtRowCols" id="dtCol1">
            <ul class="breadcrumb">
                <li><a></a></li>
                <li><a></a></li>
                <li><a></a></li>
            </ul>
    </div>
    <div class="hidden-xs hidden-sm col-md-4 col-md-push-4 dtRowCols text-right" id="dtCol2">
        <input type="text" placeholder="Change City" value="">
    </div> 
    <div class="hidden-xs hidden-sm col-md-4 col-md-pull-8 dtRowCols" id="dtCol3">
        <div class="row text-center">
            <div class="col-md-6 dtCol3Gc">loc</div>
            <div class="col-md-6 dtCol3Gc">date</div>
        </div>
    </div>
</div> <!-- end dTRow -->

CSS：

#dtRow {
 border: 1px solid red;
display: flex;   
}

.dtRowCols {
border: 2px dotted blue;    
background-color: rgba(128,128,128,.4);     
}

#chCity {
margin: auto;  
}

但是，glyphicon和breadcrum不会在中间垂直/水平对齐。请帮忙。附加屏幕截图。 enter image description here

Answer 1

你应该使用 position 和 transform 来对齐你的glyphicon横向和纵向，对于你的面包屑，你应该改变它的默认 margin as：

代码段

#dtRow {
  border: 1px solid red;
  display: flex;
}
.dtRowCols {
  border: 2px dotted blue;
  background-color: rgba(128, 128, 128, .4);
}
/* Change in your CSS */

.breadcrumb {
  margin: 20px 0;
}
#chCity {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="dtRow">
  <div class="hidden-md hidden-lg col-xs-1 dtRowCols" id="dtCol0">
    <div class="glyphicon glyphicon-cog" id="chCity"></div>
  </div>
  <div class="col-xs-11 col-md-4 col-md-push-4 dtRowCols" id="dtCol1">
    <ul class="breadcrumb">
      <li>
        <a></a>
      </li>
      <li>
        <a></a>
      </li>
      <li>
        <a></a>
      </li>
    </ul>
  </div>
  <div class="hidden-xs hidden-sm col-md-4 col-md-push-4 dtRowCols text-right" id="dtCol2">
    <input type="text" placeholder="Change City" value="">
  </div>
  <div class="hidden-xs hidden-sm col-md-4 col-md-pull-8 dtRowCols" id="dtCol3">
    <div class="row text-center">
      <div class="col-md-6 dtCol3Gc">loc</div>
      <div class="col-md-6 dtCol3Gc">date</div>
    </div>
  </div>
</div>
<!-- end dTRow -->

更新（根据OP的要求）

此处针对文本框对齐问题更新了JSFiddle。