I've run into an issue that seems simple to fix, but I haven't been able to find a solution yet.
What I'm trying to achieve is to make the divs (with classes left-side, middle, and right-side) clickable links with the text positioned in the center. Currently, my code works fine when the text isn't vertically centered, but as soon as I center it, the hover effect still works but clicking on the div stops functioning.
Here's what my DIV looks like:
p {
font-family: 'Nunito', sans-serif;
font-size: 22px;
color: #fff;
text-decoration: none;
}
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.left-side {
width: 394px;
text-align: center;
background-color: #f2830c;
color: #fff;
box-shadow: 10px 10px 20px 0px hsla(0, 0%, 0%, 0.1)
}
.left-side:hover{
background-color: #ff921d;
}
.left-side:hover p {
color:#2a2a2a;
}
a.div-link {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
z-index: 1;
}<div class="left-side">
<section>
<p class="center">SALON</p>
<a href="http://google.com" class="div-link"></a>
</section>
</div>