Text in hover element not centering when changing font size - html

Question

So i'm trying to have a div with text appear on a parent div when a mouse hovers the parent, all was going well and good until I encountered a problem where the text ("VISIT") was no longer centering when the font size is changed to be larger.
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
bottom: 0;
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>
As you can see, the text "VISIT" is aligned properly horizontally, but not vertically. Anyone know a solution?

Answer 1

Try using a <span> element instead of a <p> element. So modify your code to this:
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<span class="visit">VISIT</span>
</div>
</div>
</div>
That should help center it or at least get you in the right direction. I tested this on jsfiddle here. You may need to play around with the margin or padding a bit, but the problem you're having is because of the <p> element.

Answer 2

Set a line-height=0 on .visit
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
bottom: 0;
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
bottom:0;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
line-height:0;
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>

Answer 3

Add top:50%; and transform: translateY(-50%); to .slidein-content, erase the bottom:0 from it and add amargin: 0 to .visit (I don't know from where, but it has a 32px top- and bottom-margin, which you have to reset to 0 that way.)
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
top:50%;
transform: translateY(-50%);
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
line-height: 2em;
margin: 0;
}
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>