Responsive Square Container Dengan Vertically Or Horizontally Ditengah Content

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>
0 Response to "Responsive Square Container Dengan Vertically Or Horizontally Ditengah Content"
Post a comment
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.