Advertisement
Guest User

Untitled

a guest
May 26th, 2016
57
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.61 KB | None | 0 0
  1. <div class='square-box'>
  2. <div class='square-content'><div><span>Aspect ratio 1:1</span></div></div>
  3. </div>
  4.  
  5. <style>
  6. .square-box{
  7. position: relative;
  8. width: 50%;
  9. overflow: hidden;
  10. background: #4679BD;
  11. }
  12. .square-box:before{
  13. content: "";
  14. display: block;
  15. padding-top: 100%;
  16. }
  17. .square-content{
  18. position: absolute;
  19. top: 0;
  20. left: 0;
  21. bottom: 0;
  22. right: 0;
  23. color: white;
  24. }
  25. .square-content div {
  26. display: table;
  27. width: 100%;
  28. height: 100%;
  29. }
  30. .square-content span {
  31. display: table-cell;
  32. text-align: center;
  33. vertical-align: middle;
  34. color: white
  35. }
  36. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement