Question

我知道这个问题已在变体中被问过，但我试图将文本纵向和横向对齐，和同时使正方形响应作为一个完美的广场。我非常接近，但当你查看全屏，并将页面置于响应模式时，方块变为矩形。如何使它们成为完美的正方形并保持对齐？

这是我的codepen

的CSS：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: grey;
  color: white;
}

.container {
  height: 100%;
  padding-top: 10%;
  float: left;
  position: relative;
  width: 110%;
  padding-bottom: 85%;
  margin: 1.66%;
  overflow: hidden;
}

.box-col {
  background: purple;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
}

.box {
  border: 5px solid black;
  border-radius: 5px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  resize: vertical;
  width: 100%
}

HTML：

<!-- made with bootstrap -->
<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col box-col">
      <div class="box">
        <div class="content">
          Cruisin shade with my squad.
        </div>
      </div>
    </div>
    <div class="col box-col">
      <div class="box">
        <div class="content">
          Bounce Bounce.
        </div>
      </div>
    </div>
    <div class="col"></div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div class="col box-col">
      <div class="box">
        <div class="content">
          Cactus be sharp, but the juice be good.
        </div>
      </div>
    </div>
    <div class="col box-col">
      <div class="box">
        <div class="content">
          I like ta make money, get turnt.
        </div>
      </div>
    </div>
    <div class="col"></div>
  </div>
</div>

Answer 1

我看到你的方块变成矩形的一个原因是.box元素上的CSS在高度上定义px值，同时为宽度赋予%值。将笔，特别是.box CSS修改为以下内容可确保它始终为正方形。我使用Chrome开发者控制台中提供的不同视口模式进行了测试

.box {
  border: 5px solid black;
  border-radius: 5px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  resize: vertical;
  width: 200px;
}

但是，唉，整个布局没有响应，因为大屏幕上的盒子缩小了。使用基于标准屏幕尺寸（或使用引导程序）的媒体查询并在容器上设置基于px或em的宽度可以帮助产生响应式布局

使文本垂直中心和完美的响应方块

1 个答案: