html – 以里面的图像为中心的响应div

概述我希望将以下jsfiddle置于中心垂直居中,响应式设计让我很难猜到从哪里获取值,因为StackOverflow上的所有教程都说“包含内容的div必须有宽度,高度.” 我已经做了一个关于它现在如何(坏)以及我希望它如何(好)的图片说明 < - 在所有设备/宽度/方向上垂直和水平居中 https://jsfiddle.net/34o9vcba/9/ https://jsfiddle.net/34o9 我希望将以下Jsfiddle置于中心垂直居中,响应式设计让我很难猜到从哪里获取值,因为StackOverflow上的所有教程都说“包含内容的div必须有宽度,高度.”
我已经做了一个关于它现在如何(坏)以及我希望它如何(好)的图片说明

< - 在所有设备/宽度/方向上垂直和水平居中 https://jsfiddle.net/34o9vcba/9/

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

标记

<div >  <div >    <div >      <a href="tel:0652333817" title="Bel ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/phoneNook.png" alt="telefoon" ></a>    </div>    <div >      <a href="mailto:slotenmakerdenhaag@gmail.com" title="Mail ons"><img src="http://eightytwenty.nl/wordpress/wp-content/uploads/2015/12/mailNook.png" alt="mail" ></a>    </div>  </div>  <div >    <div >      <a href="contact" title="Bel ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/infoNook.png" alt="telefoon" ></a>    </div>    <div >      <a href="contact#contact" title="Mail ons"><img src="http://eightytwenty.nl//wordpress/wp-content/uploads/2015/12/contactNook.png" alt="mail" ></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;}

解决方法 给下面的CSS做一个技巧：

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

Updated Fiddle

总结

以上是内存溢出为你收集整理的html – 以里面的图像为中心的响应div全部内容，希望文章能够帮你解决html – 以里面的图像为中心的响应div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。