Text wont align on horizontal and vertical centers - css

Question

I am trying to work on the following example for a user profile.
I have a problem with the text on my various fields though. I would like them to be centered horizontally and vertically.
Using
vertical-align: middle;
Did not work for me, or I did something wrong.
How can I make it so each text snippet is perfectly centered on its respective container?

Answer 1

Here's the solution:
/* --------------------------------
Primary style
-------------------------------- */
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto/Roboto-Regular.ttf');
font-weight: normal;
font-style: normal;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
display: block;
}
html,
body {
background: #f1f1f1;
font-family: 'Roboto', sans-serif;
padding: 1em;
}
h1 {
text-align: center;
color: #a8a8a8;
font-size: 200%;
}
.user-data {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
cursor: pointer;
display: table;
width: 100%;
height: 85px;
background: white;
margin: 0 auto;
margin-top: 1em;
margin-bottom: 20px;
border-radius: 8px;
-webkit-transition: all 250ms;
transition: all 250ms;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.response-layer {
vertical-align: middle;
display: table-cell;
text-align: center;
font-size: 200%;
color: #a8a8a8;
}
#user-action-text {
color: #f1f1f1;
font-size: 400%;
}
#user-name {
border: 0;
outline: 0;
padding: 0;
margin: 0px;
margin-top: 10px;
width: 304px;
height: 55px;
color: white;
}
#user-action {
background: #e74c3c;
height: 134px;
}
#user-position {
height: 74px;
}
#user-uuid {
height: 54px;
}
section {
max-width: 650px;
text-align: center;
margin: 20px auto;
}
section img {
border: 0;
outline: 0;
padding: 0;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
display: block;
width: 100%;
margin-top: 1em;
-webkit-transition: all 250ms;
transition: all 250ms;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
resize: none;
}
.half {
float: left;
width: 48%;
margin-bottom: 1em;
}
.right {
width: 50%;
}
.left {
margin-right: 2%;
}
.user-data:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
section img:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
#-webkit-keyframes loading {
0%, 100% {
margin-top: -50px;
box-shadow: 0px 55px 40px 0px rgba(0, 0, 0, 0.3);
}
30%,
80% {
margin-top: 0px;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
}
}
#keyframes loading {
0%, 100% {
margin-top: -50px;
box-shadow: 0px 55px 40px 0px rgba(0, 0, 0, 0.3);
}
30%,
80% {
margin-top: 0px;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
}
}
#media (max-width: 690px) {
.half {
width: 304px;
float: none;
margin-bottom: 0;
}
}
/* Clearfix */
.activity-detail:before,
.activity-detail:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.activity-detail:after {
clear: both;
}
<h1>New Activity Details</h1>
<section class="activity-detail">
<div class="half right" id="image-data">
<img src="img/default-avatar.png" alt="Profile Photo" style="width:304px;height:304px;" id="profile-photo">
<a class="user-data" id="user-name">
<div class="response-layer">Green Leaf</div>
</a>
</div>
<div class="half left" id="general-data">
<a class="user-data" id="user-action">
<div class="response-layer" id="user-action-text">Greetings</div>
</a>
<a class="user-data" id="user-position">
<div class="response-layer">Developer</div>
</a>
<a class="user-data" id="user-uuid">
<div class="response-layer">324124535345</div>
</a>
</div>
</section>
On the parent div .user-data I changed display to table.
On the child div .response-layer (the one containing "Greetings") I changed the display to table-cell. Now the vertical align works.
Here's the link to the codepen: Codepen

Answer 2

Replacing
vertical-align: middle;
with
position: relative;
top: 25%;
does the trick.
Edit: The answer above is much cleaner