I have a Bootstrap row and I'm attempting to center some text vertically, but it's only centered horizontally.
Current Layout:
https://i.sstatic.net/XcqHi.png
Desired Layout:
https://i.sstatic.net/ZegKG.png
The second image shows the phrase "contact me" centered both vertically and horizontally within the div.
Code
This is my HTML code:
<div class="col-lg-6">
<h1 class="landing-header">PLACEHOLDER</h1>
<p class="landing-text">PLACEHOLDLER</p>
<div class="row landing-contact-me">
<div class="col-2"><a href="linkedin.com"><img class="img-fluid landing-socials"
src="assets/linkedin.png"></a>
</div>
<div class="col-2"><a href="instagram.com"><img class="img-fluid landing-socials"
src="assets/instagram.png"></a>
</div>
<div class="col-8 center">
<p id="landing-contact-me-text">contact me<p>
</div>
</div>
</div>
I attempted to use the Center class for the parent div without success.
Here is the CSS for the relevant classes:
.landing-header {
font-family: 'DM Serif Display';
font-size: 4rem;
}
.landing-text {
font-family: 'Montserrat';
font-size: 1.25rem;
font-weight: 200;
margin-right: 25%;
text-align: justify;
}
.landing-contact-me {
margin-top: 30%;
margin-right: 25%;
padding: 3% 2% 3% 2%;
border-radius: 25px;
background-color: white;
box-shadow: 0px 0px 90px rgba(0, 0, 0, 0.1);
align-items: center;
text-align: center;
}
.landing-socials{
max-width: 100%;
height: auto;
}
#landing-contact-me-text{
font-family: 'Montserrat';
font-size: 1.25rem;
font-weight: 200;
text-align: center;
}
.center{
text-align: center;
vertical-align: middle;
}