如何在外部父

Question

http://codepen.io/anon/pen/jPPWeZ

我需要将一些图像和文字集中在灰色背景中间。

我已尝试使用line-height，vertical-align，padding，但无效。 任何人都可以给我一个亮点吗？

代码：

HTML：

<section class="main">
  <h2 class="main__title">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
</h2>
  <div class="container">
    <ul class="main__list">
      <li class="main__item">
        <img class="main__image" src="http://lorempixel.com/40/40/" />
        <p class="main__tip">
          "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
        </p>
      </li>
      <li class="main__item">
        <img class="main__image" src="http://lorempixel.com/40/40/" />
        <p class="main__tip">
          "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

        </p>
      </li>
      <li class="main__item">
        <img class="main__image" src="http://lorempixel.com/40/40/" />
        <p class="main__tip">
          "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
        </p>
      </li>
      <li class="main__item">
        <img class="main__image" src="http://lorempixel.com/40/40/" />
        <p class="main__tip">
          "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
        </p>
      </li>
      <li class="main__item">
        <img class="main__image" src="http://lorempixel.com/40/40/" />
        <p class="main__tip">
          "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
        </p>
      </li>
      <li class="main__item">
        <img class="main__image" src="http://lorempixel.com/40/40/" />
        <p class="main__tip">
          "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
        </p>
      </li>
    </ul>
  </div>
</section>

CSS：

.main {
  position: relative;
  width: 730px;
  background-color: #ebebeb;
  padding-bottom: 5px; }
  .main__title {
    font-family: 'gill_sans_std';
    font-size: 24px;
    background-color: #004c6b;
    text-align: center;
    padding: 15px 0;
    text-transform: uppercase;
    color: #FFF;
    margin-top: 25px; }
  .main__list {
    list-style: none;
    padding: 0; }
  .main__item {
    background-color: #cbcbcb;
    position: relative;
    height: 50px;
    padding: 5px;
    margin: 10px 0; }
  .main__tip {
    font-family: 'gill_sans_std';
    font-size: 14px;
    width: 585px;
    display: inline-block;
    position: relative;
    left: 20px; }