时间戳

首页 > 解决方案 > 如何制作内容居中的可点击响应方块？

html - 如何制作内容居中的可点击响应方块？

问题描述

我有一组列，每列都包含一个方形框，填充到列宽并保持方形高度比。

整个框必须是可点击的，里面的内容也在框内居中。我想不出一种方法来让内部<a>元素填充父 div 内的空间并让自己的内容居中。

这是一个可编辑的小提琴

整个方块应该是红色的，完全可以点击，并且中间有一个下载按钮。

我已经查看了一堆关于使用 CSS 制作方形框的类似问题，但没有发现任何关于像这样填充框的内部元素。

谢谢

.block {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border: 2px solid #600;
}
.block a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #C00;
  text-decoration: none;
}
.block span {
  padding: 1em;
  border: 2px solid #FFF;
  text-align: center;
  color: #FFF;
}

/* Demo only */
.row {
  display: flex;
  justify-content: space-between;
}
.column {
  width: 20%;
}
<div class="row">
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
</div>

标签： htmlcss

解决方案

将父级设置.block为position: relative允许我们设置.block > a为position: absolute，其尺寸填充其父级；我只添加了 3 个 css 规则，它们被注释了，所以你知道哪些：

.block {
  position: relative; /* change #1 */
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border: 2px solid #600;
}
.block a {
  position: absolute; /* change #2 */
  left: 0; right: 0; top: 0; bottom: 0; /* change #3 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #C00;
  text-decoration: none;
}
.block span {
  padding: 1em;
  border: 2px solid #FFF;
  text-align: center;
  color: #FFF;
}

/* Demo only */
.row {
  display: flex;
  justify-content: space-between;
}
.column {
  width: 20%;
}
<div class="row">
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
  <div class="column">
    <div class="block">
      <a href="#">
        <span>Download</span>
      </a>
    </div>
  </div>
</div>

推荐阅读