центрирование реагирующих divs с изображениями внутри

Я хотел бы сосредоточить следующий jsfiddle, который будет центрирован по вертикали во все времена, отзывчивый дизайн затрудняет мне угадывать, откуда получить значение, потому что все учебники на StackOverflow говорят «The div, содержащий контент, должен иметь ширину и высоту ». Я сделал иллюстрацию картины о том, как это сейчас (плохо), и, как я хотел, чтобы быть (хорошо)центрирование реагирующих divs с изображениями внутри

< - по центру вертикально и горизонтально на все устройства/ширине/ориентациях

https://jsfiddle.net/34o9vcba/9/

https://jsfiddle.net/34o9vcba/9/embedded/result/

Markup

<div class="wrapper"> 
    <div class="rowOne"> 
    <div class="telefoonButton"> 
     <a href="tel:0652333817" title="Bel ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/phoneNook.png" alt="telefoon" class="Center-Block Absolute-Center is-Image"></a> 
    </div> 
    <div class="mailButton"> 
     <a href="mailto:[email protected]" title="Mail ons"><img src="http://eightytwenty.nl/wordpress/wp-content/uploads/2015/12/mailNook.png" alt="mail" class="Center-Block Absolute-Center is-Image"></a> 
    </div> 
    </div> 
    <div class="rowTwo"> 
    <div class="infoButton"> 
     <a href="contact" title="Bel ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/infoNook.png" alt="telefoon" class="Center-Block Absolute-Center is-Image"></a> 
    </div> 
    <div class="contactButton"> 
     <a href="contact#contact" title="Mail ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/contactNook.png" alt="mail" class="Center-Block Absolute-Center is-Image"></a> 
    </div> 
    </div> 
</div>

CSS

.wrapper { 
    height: 80vh; 
    margin: 0 auto; 
    width: 90%; 
} 
.rowOne, .rowTwo { 
    width: 50%; 
    height: auto; 
    float: left; 
} 
.Absolute-Center.is-Image { 
    height: auto; 
} 

.Absolute-Center.is-Image img { 
    width: 50%; 
    height: auto; 
}

источник

2015-12-22 Gandoe Dyck

Сначала вы должны добавить дополнительную div к разметке и положить rowOne и rowTwo в дополнительной div, названный middle:

Markup

<div class="wrapper"> 
    <div class="middle"> 
     <div class="rowOne"></div> 
     <div class="rowTwo"></div> 
    </div> 
</div>

Затем вы должны добавить некоторые CSS:

CSS

.wrapper{ 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 
.wrapper .middle { 
    display: table-cell; 
    vertical-align: middle; 
} 
.wrapper div{ text-align:center } 
.wrapper div a{ display: inline-block }

источник

2015-12-22 03:55:56 Trix

подавай следующий CSS будет делать трюк:

.rowOne > div { 
    text-align: center; 
} 


.rowTwo > div { 
    text-align: center; 
}

Updated Fiddle

источник

2015-12-22 03:58:13 ketan

Хм, мне кажется, что он все еще находится на вершине, а не в центре (по вертикали) –

Пожалуйста, проверьте код .. Пожалуйста, в HTML обертывание div класс .centered и в css position:absolute и transform suing css3 .. Его довольно легко и здорово.

https://jsfiddle.net/34o9vcba/19/

.wrapper { 
 
    height: 100vh; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.rowOne, .rowTwo { 
 
    width: 50%; 
 
    height: auto; 
 
    float: left; 
 
} 
 
.Absolute-Center.is-Image { 
 
    height: auto; 
 
} 
 

 
.centered { 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
    top: 50%; 
 
    left: 50%; 
 
    text-align: center; 
 
} 
 

 
.Absolute-Center.is-Image img { 
 
    width: 50%; 
 
    height: auto; 
 
}

<div class="wrapper"> 
 
    <div class="centered"> 
 
    <div class="rowOne"> 
 
     <div class="telefoonButton"> 
 
     <a href="tel:0652333817" title="Bel ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/phoneNook.png" alt="telefoon" class="Center-Block Absolute-Center is-Image"></a> 
 
     </div> 
 
     <div class="mailButton"> 
 
     <a href="mailto:[email protected]" title="Mail ons"><img src="http://eightytwenty.nl/wordpress/wp-content/uploads/2015/12/mailNook.png" alt="mail" class="Center-Block Absolute-Center is-Image"></a> 
 
     </div> 
 
    </div> 
 
    <div class="rowTwo"> 
 
     <div class="infoButton"> 
 
     <a href="contact" title="Bel ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/infoNook.png" alt="telefoon" class="Center-Block Absolute-Center is-Image"></a> 
 
     </div> 
 
     <div class="contactButton"> 
 
     <a href="contact#contact" title="Mail ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/contactNook.png" alt="mail" class="Center-Block Absolute-Center is-Image"></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2015-12-22 04:21:21 Kumar

Хорошо, попробуйте это.

html, body { 
height: 100%; 
} 

body { 
margin: 0; 
} 

.wrapper { 
height: 100%; 
width: 100%; 
margin: 0 auto; 
text-align: center; 
} 

.centered { 
position: relative; 
overflow: hidden; 
top: 50%; 
transform: translateY(-50%); 
-webkit-transform: translateY(-50%); 
}

источник

2015-12-22 05:21:11 VilleKoo

Я разработал его!

<div class="wrapper"> 
    <div class="middle"> 
    <div class="rowOne"> 
    <div class="telefoonButton"> 
     <a href="tel:0652333817" title="Bel ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/phoneNook.png" alt="telefoon" class="Center-Block Absolute-Center is-Image"></a> 
    </div> 
    <div class="mailButton"> 
     <a href="mailto:[email protected]" title="Mail ons"><img src="http://eightytwenty.nl/wordpress/wp-content/uploads/2015/12/mailNook.png" alt="mail" class="Center-Block Absolute-Center is-Image"></a> 
    </div> 
    </div> 
    <div class="rowTwo"> 
    <div class="infoButton"> 
     <a href="contact" title="Bel ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/infoNook.png" alt="telefoon" class="Center-Block Absolute-Center is-Image"></a> 
    </div> 
    <div class="contactButton"> 
     <a href="contact#contact" title="Mail ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/contactNook.png" alt="mail" class="Center-Block Absolute-Center is-Image"></a> 
    </div> 
    </div> 
    </div> 
<div> 
</div> 

.telefoonButton, .mailButton, .infoButton, .contactButton { 
    float: left; 
} 
.wrapper{ 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 
.wrapper .middle { 
    display: table-cell; 
    vertical-align: middle; 
} 
.wrapper div{ text-align:center } 
.wrapper div a{ display: inline-block } 
.rowOne, .rowTwo { 
    width: 50%; 
    height: auto; 
    float: left; 
} 
.Absolute-Center.is-Image { 
    height: auto; 
} 

.Absolute-Center.is-Image img { 
    width: 50%; 
    height: auto; 
}

источник

2015-12-22 22:44:52

Изменение кода CSS, как показано ниже:

.Absolute-Center.is-Image { 
    display: block; 
    margin: 0px auto; 
    }

источник

2015-12-24 12:52:49 Emirhan

центрирование реагирующих divs с изображениями внутри

ответ

Смежные вопросы