html - 中间对齐包含字形图标和面包屑的 div

Question

我有一个包含 4 个 div 的 Bootstrap 行，它们随着屏幕大小的变化而隐藏/推/拉。 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;  
}

但是，字形图标和面包屑不会在中间垂直/水平对齐。请帮忙。附上屏幕截图。 enter image description here

Answer 1

你应该使用 position 和 transform 来水平和垂直对齐你的 glyphicon 和你的面包屑应将其默认 margin 更改为:

代码片段

#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用于文本框对齐问题。