how to vertical align <p> and <div>, position them without table-cell property

Question

I want to position my text so it is vertical align in the middle with ch-grid <div> (that circle color thing).

Is it possible to make it without giving <p> any display attribute because when I position it I will give it display:none so I can fade it out and do something later.

Sorry but I tried a lot of thing and nothing works for me. Thanks a lot.
Here is my code:

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

And 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

add top:50%; transform: translateY(-50%); top:50%; transform: translateY(-50%); in the p tag to get it vertically aligned in middle

position: relative;
top: 50%;
margin: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

Demo:-

 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; position: relative; top: 50%; margin:0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .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-artistic-wallpaper4.jpg"); } .ch-img-2 { background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_41,w_100/v1479836446/Bike%20page/Fantastic-Artistic-Pictures5.jpg"); } .ch-img-3 { background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_43,w_100/v1479836455/Bike%20page/Artistic-Pictures-HD.jpg"); } .ch-img-4 { background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_31,w_100/v1479836467/Bike%20page/Artistic-Images-For-Desktop2.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; } 

 <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 class="ch-grid"> <p>Bikes!</p> <div class="ch-item ch-img-2 "> <div class="ch-info ch-info-2"> <i class="fa fa-bicycle fa-5x" aria-hidden="true"></i> </div> </div> </div> <div class="ch-grid"> <p>Parts.</p> <div class="ch-item ch-img-3"> <div class="ch-info ch-info-3"> <i class="fa fa-cog fa-spin fa-5x fa-fw"></i> </div> </div> </div> <div class="ch-grid"> <p>Why ride?</p> <div class="ch-item ch-img-4"> <div class="ch-info ch-info-4"> <i class="fa fa-arrows fa-5x" aria-hidden="true"></i> </div> </div> </div> </div> </div> </div> 

Answer 2

You need to move the div.ch-item upwards.

.ch-item {
    margin-top: -75px;
}

Here is the snippet:

 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; margin-top: -75px; } 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-artistic-wallpaper4.jpg"); } .ch-img-2 { background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_41,w_100/v1479836446/Bike%20page/Fantastic-Artistic-Pictures5.jpg"); } .ch-img-3 { background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_43,w_100/v1479836455/Bike%20page/Artistic-Pictures-HD.jpg"); } .ch-img-4 { background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_31,w_100/v1479836467/Bike%20page/Artistic-Images-For-Desktop2.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; } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <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 class="ch-grid"> <p>Bikes!</p> <div class="ch-item ch-img-2 "> <div class="ch-info ch-info-2"> <i class="fa fa-bicycle fa-5x" aria-hidden="true"></i> </div> </div> </div> <div class="ch-grid"> <p>Parts.</p> <div class="ch-item ch-img-3"> <div class="ch-info ch-info-3"> <i class="fa fa-cog fa-spin fa-5x fa-fw"></i> </div> </div> </div> <div class="ch-grid"> <p>Why ride?</p> <div class="ch-item ch-img-4"> <div class="ch-info ch-info-4"> <i class="fa fa-arrows fa-5x" aria-hidden="true"></i> </div> </div> </div> </div> </div> </div> </body> </html> 

Answer 3

Why not to use flexbox with align-items:center : https://jsfiddle.net/qg7en3cs/5/ ? It aligns the direct children of the container without need to change their display value.

Also, what is the use of

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

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

in your initial demo? It looks exactly like 'micro clearfix' hack, but clearfix hacks are needed only if layout is built with floats, but I don't see any float in your demo.