将响应式div居中与图像居中 [英] centering responsive divs with images inside

问题描述

我想将以下jsfiddle居中垂直对齐，响应式设计使我很难猜测从哪里获得价值，因为StackOverflow上的所有教程都说包含内容的div必须具有宽度和高度."我对现在的状态(不好)和我希望它的状态(很好)做了一个图片说明

I would like to center the following jsfiddle to be centered vertically at alll times, responsive design makes it hard for me to guess where to get a value from because all tutorials on StackOverflow have been saying "The div containing the content must have a width and height." I have made a picture illustration on how it is now(bad) and how i would want it to be (good)

<-在所有设备/宽度/方向上垂直和水平居中

<-- centered vertically and horizontally on all devices/widths/orientation

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

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

标记

<div class="wrapper">
  <div class="rowOne">
    <div class="telefoonButton">
      <a href="tel:[phone]" 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:[e-mail]" 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;
}

推荐答案

请检查代码..请在 HTML 中使用 div 类 .centered 并使用css3在css中的 position:absolute 和 transform 中.它非常简单和酷.

Please check code.. Please in HTML wrap with div class .centered and in css position:absolute and transform suing css3 .. Its pretty easy and cool.

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:[phone]" 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:[e-mail]" 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居中与图像居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！