html - 如何垂直对齐 <p> 和 <div>，在没有 table-cell 属性的情况下定位它们

Question

我想定位我的文本，使其在中间垂直对齐 ch-grid <div> (那个圆圈颜色的东西)。

有没有可能不给<p>任何显示属性，因为当我定位它时，我会给它 display:none这样我就可以淡出它并稍后再做一些事情。

抱歉，但我尝试了很多方法，但没有任何效果。非常感谢。
这是我的代码:

<div class="container">
<div class="row">
    <div class="col-xs-12 col-md-3 col-md-push-6"> 
    <div class="ch-grid">
           <p>Who are we?</p>            
         <div class="ch-item ch-img-1">
             <div class="ch-info ch-info-1">
               <i class="fa fa-user fa-5x" aria-hidden="true"></i>
             </div>
         </div>
      </div>    
   </div>
</div>
</div>

和 CSS:

body{
padding-top: 100px; 
height: 100%;
font-family: helvetica, sans-serif, verdana;
}

.ch-grid {
position: relative;
text-align: center;
margin-bottom: 5vh;
width:400px;
height: 100px;
display: inline-block;
vertical-align: middle;
}

.ch-grid:after,
.ch-item:before {
  content: '';
  display: table;
}

.ch-grid:after {
  clear: both;
 }

.ch-item {
 width: 100px;
 height: 100px;
 border-radius: 50%;
 position: absolute;
 margin-left: 200px;
 overflow: hidden;
 cursor: default;
 box-shadow: 
    inset 0 0 0 16px rgba(255,255,255,0.6),
    0 1px 2px rgba(0,0,0,0.1);
 transition: all 0.4s ease-in-out;
 }

p {
 width: 100px;
 vertical-align: middle;
}
 .ch-img-1 { 
 background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload /c_scale,h_100,q_46,w_100/v1479836467/Bike%20page/Free-HD-artisticwallpaper4.jpg");
}   

.ch-info {

background: rgba(218, 173, 77, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
 }

.ch-info-2{
 background: rgba(157, 151, 138, 0.8);
 }

 .ch-info-3{
 background: rgba(126, 154, 220, 0.8);
 }

 .ch-info-4{
background: rgba(76, 166, 37, 0.8);
  }

.ch-info i {
margin-top: 15px;
color: white;
}

.ch-item:hover {
box-shadow: 
    inset 0 0 0 1px rgba(255,255,255,0.1),
    0 1px 2px rgba(0,0,0,0.1);
}

.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}

https://jsfiddle.net/Chainervk/qg7en3cs/

Answer 1

为什么不使用带有 align-items:center 的 flexbox:https://jsfiddle.net/qg7en3cs/5/ ？它对齐容器的直接子代，而无需更改它们的 display 值。

还有，有什么用

.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}

.ch-grid:after {
    clear: both;
}

在您的初始演示中？它看起来完全像“micro clearfix”hack，但只有在使用 float 构建布局时才需要 clearfix hack，但我在您的演示中没有看到任何 float 。