首页 > html > text > Page Widget - 如何自动调整大小正方形与中心文本

Page Widget - 如何自动调整大小正方形与中心文本

text 【text】
我们想知道如何自动调整大小正方形与中心文本。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.square-box {
  position: relative;
  width: 50%;
  overflow: hidden;
  background: #4679BD;
}

.square-box:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.square-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
}

.square-content div {
  display: table;
  width: 100%;
  height: 100%;
}

.square-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: white
}
</style>
</head>
<body>
  <div class='square-box'>
    <div class='square-content'>
      <div>
        <span>Aspect ratio 1:1</span>
      </div>
    </div>
  </div>
</body>
</html>