How to make a centered section clickable? - html

Question

I simply want to make a centered section clickable. I used margin auto to center my section but now the margins are clickable too. Should I use flex-box or something to center the section so that there's no more margin or there is an other way? What's the best practice here?
<main>
<a href="#">
<section>
<div class="content">
<h2>some stuff</h2>
<h1>title</h1>
<img src="img/arrow.svg" alt="arrow" width="30">
</div>
</section>
</a>
</main>
section {
width: 400px;
height: 400px;
margin: 0 auto 100px auto;
}
Here's a JSFiddle : Clickable centered section

Answer 1

I've another solution for you. Just add the following code to your css. You can try this.
a {
display: block;
height: fit-content;
width: fit-content;
margin: 0 auto 100px auto;
}
a {
display: block;
height: fit-content;
width: fit-content;
margin: 0 auto 100px auto;
}
section {
border-radius: 10px;
width: 400px;
height: 400px;
position: relative;
box-shadow: 0 1px 3px rgba(85, 85, 85, 0.25), 0 1px 2px rgba(0,0,0,0.12);
transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}
section:hover {
box-shadow: 0 14px 28px rgba(85, 85, 85, 0.25), 0 10px 10px rgba(0,0,0,0.10);
}
section.logofolio {
background-color: #3D75E3;
}
section .content {
position: absolute;
bottom: 0;
padding: 0 0 100px 100px;
}
section h1 {
font-family: 'Archivo Black', sans-serif;
font-weight: bold;
font-size: 3rem;
color: #FFFFFF;
padding-top: 10px;
}
section h2 {
font-family: 'Roboto Mono', monospace;
font-weight: 400;
font-size: 0.8rem;
color: #FFFFFF;
}
section img {
padding-top: 10px;
}
<main class="work">
<p style="text-align: center">
As you can see the margins are clickable too!
</p>
<a href="#">
<section class="logofolio">
<div class="content">
<h2>some stuff</h2>
<h1>Title</h1>
<img src="img/arrow.svg" alt="arrow" width="30">
</div>
</section>
</a>
</main>

Answer 2

Here's my solution for you. I used absolute positioning to center the div. I separated my code using comments. You can check that. Hope it will be helpful.
section {
border-radius: 10px;
width: 1000px;
height: 400px;
/*Edited portion starts*/
position: absolute;
left: 50%;
/* margin: 0 auto 100px auto; */
/*Edited portion ends*/
transform: translateX(-50%);
box-shadow: 0 1px 3px rgba(85, 85, 85, 0.25), 0 1px 2px rgba(0,0,0,0.12);
transition: all 0.5s cubic-bezier(.25,.8,.25,1);
&:hover {
box-shadow: 0 14px 28px rgba(85, 85, 85, 0.25), 0 10px 10px rgba(0,0,0,0.10);
}
.content {
position: absolute;
bottom: 0;
padding: 0 0 100px 100px;
h1 {
font-family: 'Archivo Black', sans-serif;
font-weight: bold;
font-size: 3rem;
color: #FFFFFF;
padding-top: 10px;
}
h2 {
font-family: 'Roboto Mono', monospace;
font-weight: 400;
font-size: 0.8rem;
color: #FFFFFF;
}
img {
padding-top: 10px;
}
}
}
section.logofolio {
background-color: #3D75E3;
}
<main class="work">
<a href="#">
<section class="logofolio">
<div class="content">
<h2>some stuff</h2>
<h1>Title</h1>
<img src="img/arrow.svg" alt="arrow" width="30">
</div>
</section>
</a>
</main>