Responsive Square Container Dengan Vertically Or Horizontally Ditengah Content

Allure Web Solutions Code Snippet
Menggunakan vanili JavaScript dan CSS, saya akan menunjukkan cara untuk secara vertikal dan horizontal pusat dinamis konten berukuran dalam wadah persegi responsif.

Kode Javascript

var contents = document.querySelectorAll('.content');
var parentHeight,
  contentHeight,
  topPosition;

// Set margin function
function setMargin(selector) {
  contentHeight = selector.clientHeight;
  parentHeight = selector.parentNode.clientHeight;
  topPosition = (parentHeight - contentHeight) / 2;

  selector.style.top = topPosition + 'px';

}

// On page load, center contents
for (var i = 0; i < contents.length; i++) {
  setMargin(contents[i]);
}

// On page resize, adjust content centering
window.addEventListener('resize', function() {
  for (var i = 0; i < contents.length; i++) {
    setMargin(contents[i]);
  }
});

Kode SCSS

div.box {
  position: relative;
  display: block;
  float: left;
  width: 50%;
  height: 50%;
  text-align: center;
  
  &:before {
    content: "";
    display: block;
    padding-top: 100%;
  }
  
  .content {
    position: absolute;
    left: 0;
    top: 25%;
    width: 100%;
    transition: all 1s ease 0s;
  }
}

Kode HTML


<div class="box">
    <div class="content">content</div>
</div>

Untuk coba-coba anda bisa menggunakan -> Codepen.io Project

0 Response to "Responsive Square Container Dengan Vertically Or Horizontally Ditengah Content"

Post a comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

loading...