środkowanie treści w responsywnym kwadratowym bloku
.porto-single-full{
width:50%;
float:left;
overflow: hidden;
padding-bottom: 50%;
position: relative;
background-color:red;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.img-content{
height: 90%;
padding: 5%;
position: absolute;
width: 90%;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/webtiki/MpXYr/4/
http://jsfiddle.net/webtiki/MpXYr/3/embedded/result/
responsywne środkowanie bloku względem okna przeglądarki:
kod html:
<div class="mainBox--full"> <div class="mainBox--inner"> <div class="mainBox--table"> <div class="mainBox--cell"> <h1>Wedding menu</h1> <h4>save the date</h4> <h2>06.08.2016</h2> </div> </div> </div> </div>
css/less kod:
.mainBox { &--full { border: solid 1px @baseWhite; margin: 0 auto; width: 500px; height: 500px; overflow: hidden; position: relative; // width: 30%; // padding-bottom: 30%; } &--inner { height: 100%; padding: 5%; position: absolute; width: 100%; } &--table { display: table; height: 100%; width: 100%; } &--cell { display: table-cell; vertical-align: middle; } }
js kod:
$(document).ready(function() { //Welcome Block Vertical Align myVerticalAlign(); }); jQuery(window).resize(function(){ //Welcome Block Vertical Align myVerticalAlign(); }); //Welcome Block Vertical Align function myVerticalAlign() { var body_h = $(window).height(); var container_h = $('.mainBox--full').height(); var marg_top = Math.abs((body_h - container_h)/2); $('.mainBox--full').css('margin-top', marg_top); }
—
Hope this helps and happy coding :)
Zobacz jeszcze
poprzedni / następny post
- z codex WP: <?php get_adjacent_post( $in_same_term, $excluded_terms, $previous, $taxonomy ) ?> Parametr $previous - opcjonalny, przyjmuje wartości true/false: true,...
Wordpress
php
Podejście do programowania w php: proceduralne obiektowe Proceduralny php jest nazywany wtedy kiedy tworzymy kod proceduralnie, procesowo czyli kiedy potrzebujemy stworzyć określone...