javascript - vertical centering by position:absolute works only on chrome -
i try set div few elements in middle of section height set 100% of screen height. problem solution have used doesn't work on other browsers google chrome. used position:absolute, display:table, margins , top:0, bottom:0;
var section = document.queryselectorall('section'); var winh = window.innerheight; header.style.height = winh+'px'; (var = 0; <= section.length; i++) { section[i].style.height = winh+'px'; }
section { padding:100px 0; position:relative; background:#222; } section div { width:90%; max-width:1200px; margin:0 auto; text-align:center; position:absolute; left:0;right:0;top:0;bottom:0; display:table; }
<section class="users"> <div> <div class="icon"><i class="fa fa-user" aria-hidden="true"></i></div> <div class="count">15 000</div> <div class="title">użytkowników</div> </div> </section>
on chrome looks perfect, on other browsers-not. section height have declared javascript.
demo (view in more 1 browser): http://wbm-blog.esy.es/projects/timeline/
i fixed setting height, removing display table , setting margin: auto 0. height needed when centering trick top: 0; bottom: 0; margin-top: auto; margin-bottom: auto;
section { padding:100px 0; position:relative; } section > div { width:90%; max-width:1200px; margin: auto 0; height: 40px; text-align:center; position:absolute; left:0;right:0;top:0;bottom:0; }
<section class="users"> <div> <div class="icon"><i class="fa fa-user" aria-hidden="true"></i></div> <div class="count">15 000</div> <div class="title">użytkowników</div> </div> </section>
Comments
Post a Comment