div内的响应式垂直中心元素 [英] Responsive vertical center elements inside div

查看：52
本文介绍了div内的响应式垂直中心元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要垂直对齐 div 容器内的元素.元素如下图所示.使用此代码，我能够很好地覆盖左侧的大图片，但文本和小图片仍然可以做它想要的.我需要避免使用 flexbox，因为我还需要支持 IE8 或至少 IE9.我已经尝试过几种解决方案，也包括表格或绝对位置，但可能我总是做错了什么......

谢谢你帮我解决这个问题:)

HTML

 
<div class="地址"><h4>abc</h4><span>acbd<br>efgh</span><span>轮胎<br>asdsad
cxzcasd</span><img src="img/ccc-map.png" alt="map-ccc">

<div class="map"><img src="img/ccc-g-map.png" alt="google-map">

</节>

SCSS

.contact {边框:1.5px 实心 $grey;宽度:100%；.地址{向左飘浮;宽度:40%；填充:2%；h4{字体大小:130%；}跨度 {字体大小:100%；}图像{宽度:45%；高度:自动；}}.地图 {浮动:对；宽度:60%；填充:1%；图像{宽度:100%；高度:自动；}}}.contact::after {内容: " ";显示:表；清楚:两者；}

解决方案

您正在混合像 h4 这样的块级元素和像 img 这样的内联元素，并期望它们对齐正确，可能，但有一个更简单的解决方案，添加第三个单元格:

.contact{显示:表；宽度:100%；边框折叠:折叠；边框:2px 实心#ddd；}.联系>div{显示:表格单元格；垂直对齐:中间；填充:8px；}.联系图片{垂直对齐:中间；宽度:100%；}.pic{宽度:100px；}.地图{宽度:60%；}

<!-- 改为创建三个单元格！--><div class="地址"><h4>abc</h4><跨度>acbd<br>efgh</span><跨度>轮胎
asdsad
cxzcasd</span>

<div class="图片"><img src="//placehold.it/100x100/fac" alt="map-ccc">

<div class="map"><img src="//placehold.it/500x300/fac" alt="google-map">

</section>

I need to verticaly align elements inside div container. Elements looks like on image below. With this code, I was able to nicely overwrap big picture on the left, but text and small picture still doing what it wants. I need to avoid flexbox, since I need to support also IE8, or atleast IE9. I've been trought several solutions, also with tables or absolute positions, but propably I've always did something wrong...

Thank you for helping me get of this :)

HTML

    <section class="contact">
        <div class="adress">
            <h4>abc</h4>
            <span>acbd<br>
            efgh</span>
            <span>tyre<br>
            asdsad<br>
            cxzcasd</span>
            <img src="img/ccc-map.png" alt="map-ccc">
        </div>
        <div class="map">
            <img src="img/ccc-g-map.png" alt="google-map">
        </div>
    </section>

SCSS

.contact {
    border: 1.5px solid $grey; 
    width: 100%;

    .adress {
        float: left;
        width: 40%;
        padding: 2%;

        h4 {
            font-size: 130%;
        }

        span {
            font-size: 100%;
        }

        img {
            width: 45%;
            height: auto;
        }
    }
    .map {
        float: right;
        width: 60%;
        padding: 1%;

        img {
            width: 100%;
            height: auto;
        }
    } 
}
.contact::after {
    content: " ";
    display: table;
    clear: both;
}

解决方案

You're mixing block-level elements like h4 and inline like img and expecting them to align properly, possible but there's a simpler solution, add a third cell:

.contact{
  display: table;
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #ddd;
}
.contact > div{
  display: table-cell;
  vertical-align:middle;
  padding:8px;
}
.contact img{
  vertical-align: middle;
  width: 100%;
}
.pic{
  width: 100px;
}
.map{
  width: 60%;
}

<section class="contact">
  
  <!-- Create three cells instead! -->
  
  <div class="adress">
    <h4>abc</h4> 
    <span>
      acbd<br>
      efgh
    </span>
    <span>
      tyre<br>
      asdsad<br>
      cxzcasd
    </span>
  </div>
  
  <div class="pic">
    <img src="//placehold.it/100x100/fac" alt="map-ccc">
  </div>
  
  <div class="map">
    <img src="//placehold.it/500x300/fac" alt="google-map">
  </div>
  
</section>

这篇关于div内的响应式垂直中心元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆