Still struggling with vertical alignment of content within an article. I've tried using tables and the vertical-align property but can't seem to make it work. Any suggestions for centering the content responsively on the right-hand side?
The left side contains an image, which is easy to insert in a line. However, I'm unsure how to vertically align the other contents within the article.
If anybody could assist me with this, it would be greatly appreciated! Thank you :)
#employee-profile {
position: relative;
}
img {
display: inline-block;
width: 40%;
}
#employee-profile-info {
display: inline-block;
position: absolute;
width: 60%;
height: calc(100% - 4px);
box-sizing: border-box;
padding: 40px;
border: 3px solid black;
margin: auto;
vertical-align: middle;
}
a {
display: inline-block;
text-decoration: none;
color: black;
text-align: center;
font-weight: bold;
box-sizing: border-box;
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 2px solid black;
transition: .5s;
}
a:hover {
color: grey;
}
:nth-child(5) {
background: red;
width: 10%;
}
:nth-child(6) {
background: yellow;
width: calc(90% - 5px);
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="employee-profile">
<img src="img/pic1.jpeg" alt="pic1">
<div id="employee-profile-info">
<article class="info">
<h3>Cameron Walker </h3>
<h4>Associate Consultant</h4>
<a href="/consultants/cameron-walker"><i class="fa fa-list-ul" aria-hidden="true"></i> View consultant jobs</a>
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0261636f67706d6c2c75636e696770427675676c767b70676170776b766f676c762c616d6f">[email protected]</a>"><i class="fa fa-envelope-o" aria-hidden="true"></i><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8aba9a5adbaa7a6e6bfa9a4a3adba88bcbfada6bcb1baadabbabda1bca5ada6bce6aba7a5">[email protected]</a></a>
<a target="_blank" href="https://www.linkedin.com/in/cameron-walker-63a73793/"><i class="fa fa-linkedin" aria-hidden="true">In</i></a>
<a href="tel:+44 203 189 4317"><i class="fa fa-phone" aria-hidden="true"></i>+44 203 189 4317</a>
<p class="custom-scroll mCustomScrollbar _mCS_1"> Cameron started at Twenty in August 2017 following the completion of his degree in English from the University of Nottingham. </p>
</article>
</div>
</div>
</body>
</html>