Aligning text in div (that is a link) kills clickability-CodePudding

I've encountered a problem that is probably easy to fix, but still looking for solution with no success.

I need those divs (left-side, middle and right-side classes) to become clickable links and the text that describes them has to be in the middle. My code looks like below, when text is not centered vertically everything works fine. When I center it, text is where I want it, but hover still works, but clikability of the div dies.

DIV looks like this:

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 >
    <section>
        <p >SALON</p>    
        <a href="http://google.com" ></a> 
    </section>
</div>

CodePudding user response：

You can try to put the <div> tag inside <a> tag, then, all the <div> will be clickable, and you can add to it all the style that you want:

<a href="http://google.com">
      <div  style="height: 100px;">
          <section>
              <p >SALON</p>
          </section>
    </div>
</a>

CodePudding user response：

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 >
  <section>
    <a href="http://google.com" >
      <p >SALON</p>
  </section>
  </a>
</div>