Page Widget How to - Auto resize square with centered text

Question

We would like to know how to auto resize square with centered text.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.square-box {<!--  w ww  .  j  a v a2  s .c o m-->
  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>

The code above is rendered as follows: