Question

我只是想使居中部分可点击。我使用了边距自动使我的部分居中，但是现在边距也可以单击。我应该使用flex-box或其他方式使该部分居中，以确保没有更多的空白或其他方法吗？这里的最佳做法是什么？

  <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;
        }

这是一个JSFiddle：Clickable centered section

Answer 1

这是我为您提供的解决方案。我使用绝对定位将div居中。我用注释分隔了代码。您可以检查一下。希望对您有所帮助。

centroids

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;
        }

Answer 2

我为您提供了另一种解决方案。只需将以下代码添加到您的CSS中即可。你可以试试看。

  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>

如何使居中的部分可点击？

2 个答案: