css - 在 CSS 中对齐多个 div、img 和文本 - 问题

Question

我正在尝试对齐多个 DIVS、图像和文本，但我无法解决这个问题..

这是我要实现的目标:

这是我的 HTML

<div class="section5">
<div class="outer">

    <div class="container1">
        <img src="icon.png" width="85">
        <div class="title1">Text</div>
        <div class="subtitle1">Text</div>   
    </div>

    <div class="container2">
        <img src="iphone.png" width="375"> 
        <div class="subtitle2">Text</div>
    </div>

 </div>
</div>

这是我的 CSS:

.section5{ height: 525px;   background-color: #5e6172;  text-align: center; position: relative;}
.outer{ width: 80%; background-color: #45da45;  height: 100%; margin: 0 auto; position: relative;} 

.title1{color: #ffffff; font-size: 2.6em; font-family: h35;   }
.subtitle1{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }
.subtitle2{color: #ffffff; font-size: 1.5em; font-family: h35; margin-top: 0.25em; }

.container1{display: block; background-color: #ccc;  }
.container2{display: block; background-color: #fffc1e;   }

这是 JSFIDDLE: http://jsfiddle.net/mib92/hogwohf8/

我目前的问题:

1) 我底部的文字需要位于图像的右侧……居中，就像我的示例图像一样。

2) 我的底部图片的底部必须与 container2 的底部和 section5 的底部对齐

3) 执行此操作时，容器 1 必须保持在 section5 剩余空间的垂直中间。

谢谢

Answer 1

希望对你有帮助。

.section5 {
      height: 525px;
      background-color: #5e6172;
      text-align: center;
      position: relative;
    }
    .outer {
      width: 80%;
      background-color: #45da45;
      height: 100%;
      margin: 0 auto;
      position: relative;
    }
    .title1 {
      color: #ffffff;
      font-size: 2.6em;
      font-family: h35;
    }
    .subtitle1 {
      color: #ffffff;
      font-size: 1.5em;
      font-family: h35;
      margin-top: 0.25em;
    }
    .subtitle2 {
      color: #ffffff;
      font-size: 1.5em;
      font-family: h35;
      margin-top: 0.25em;
    }
    .container1 {
      display: block;
      background-color: #ccc;
    }
    .container2 {
      display: block;
      background-color: #fffc1e;
    }
    .right-sied {
      display: inline-block;
      vertical-align: top;
      width: 41%;
    }
    .left-sied {
      display: inline-block;
      width: 49%;
    }
    .left-sied img {
      max-width: 100%;
    }

<div class="section5">
  <div class="outer">
    <div class="container1">
      <img src="icon.png" width="85">
      <div class="title1">Text</div>
      <div class="subtitle1">Text</div>
    </div>

    <div class="container2">
      <div class="left-sied">
        <img src="iphone.png" width="375">
      </div>
      <div class="right-sied">
        <div class="subtitle2">Text</div>
      </div>
    </div>

  </div>
</div>

Live Demo