I'm using a bootstrap row and I'm trying to center some text, but the text is centered horizontally, and not vertically.
The second image has the "contact me centered vertically and horizontally in the div.
Here 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>
As you can see, I tried using the Center class for the parent div, but to no avail.
Heres the CSS for 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;
}
In the .landing-contact-me div you can remove align-items, and text-align.
Then you can use display: flex and justify-content: center so that the elements in this div will be vertically and horizontally aligned.
Your css should look like this after:
.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);
display: flex;
justify-content: center;
}