在CSS中对齐多个div，img和text - 问题

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）底部图片的底部必须与容器2的底部和第5部分的底部对齐

3）执行此操作时，容器1必须保留在第5部分剩余空间的垂直中间。

谢谢

Answer 1

检查一下：

＆＃13;

＆＃13;

    .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;

    }

    .container1 .wrapper {

      display: inline-block;

      float: right;

    }

    .container2 img {

      margin: 0 auto;

    }

＆＃13;

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

    <div class="container1">

      <img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="85">
      <div class="wrapper">
        <div class="title1">Text</div>
        <div class="subtitle1">Text</div>
      </div>
    </div>

    <div class="container2">
      <div class="subtitle2">Text</div>
      <img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" width="375">
    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我一直在帮助你。

＆＃13;

＆＃13;

.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%;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<强> Live Demo