Css 与图像垂直对齐的Div

我知道这已经被问了很多很多次了，但我仍然无法独自完成我想要的。我看了各种网站寻求帮助，例如和以及使用垂直对齐的显示表、线高度等

以下是我试图完成的任务（我知道我可能需要添加更多div）。文本并不总是固定不变的，所以我不能只设置填充并处理它，因为红色和蓝色的文本可能会改变长度

下面是我目前拥有的一个简单的JSFIDLE：

这是图像下方的文本
这是图像右侧的文本，通常包含大量文本。这是图像右侧的文本，通常包含大量文本。这是图像右侧的文本，通常包含大量文本。这是图像右侧的文本，通常包含大量文本。
.集装箱{
边框：1px纯黑；
宽度：400px；
高度：自动；
位置：相对位置；
显示：内联块；
}
.左{
浮动：左；
宽度：25%；
}
.对{
浮动：对；
宽度：75%；
}
.左，.右{
边缘顶部：25px；
边缘底部：25px；
}

你离得太近了！只需将图像设置为

display:block

---

你离得太近了！只需将图像设置为

display:block

---

您可以使用

display:table

和

display:table cell

进行垂直对齐

看

---

在IE6和IE7上不起作用，但从IE8向上

可以使用

display:table

和

display:table cell

进行垂直对齐

看

---

在IE6和IE7上不起作用，但从IE8向上不使用浮动元素。相反，使用内联元素（可以在其上使用

垂直对齐

样式），与

空白：nowrap

和

字体大小：0

粘合在一起，如所示

标记（未更改）：

---

不要使用浮动元素。相反，使用内联元素（可以在其上使用

垂直对齐

样式），与

空白：nowrap

和

字体大小：0

粘合在一起，如所示

标记（未更改）：

---

不完全是这样，如果您添加更多的文本，您将看到一个问题。我希望下面的图像和文本保持垂直对齐，以及在哪里对齐？在中间在底部？它在顶部对齐，垂直排列在中间，这样就可以居中。你可以看到，在我的模拟图像，左边将留在中间的文本的权利。这仍然是基于一个固定的百分比。它可能对您来说足够了，但它没有居中。不完全是，如果您添加更多的文本，您将看到一个问题。我希望下面的图像和文本保持垂直对齐，以及在哪里对齐？在中间在底部？它在顶部对齐，垂直排列在中间，这样就可以居中。你可以看到，在我的模拟图像，左边将留在中间的文本的权利。这仍然是基于一个固定的百分比。这对你来说可能足够了，但它没有居中。

<div class="container">
    <div class="left">
        <img src="http://www.gadgets-for-men.co.uk/wp-content/themes/revolution_tech-20/images/rss-icon-50.gif" />
        <span>This is text below the image</span>
    </div>
    <div class="right">
        <span>This is text to the right of the image, will usualy contain a lot of text. This is text to the right of the image, will usualy contain a lot of text. This is text to the right of the image, will usualy contain a lot of text. This is text to the right of the image, will usualy contain a lot of text.</span>
    </div>
</div>


.container{
    border: 1px solid black;
    width: 400px;
    height: auto;
    position: relative;
    display: inline-block;
}

.left{
    float:left;
    width: 25%;
}

.right{
     float: right;
    width: 75%;
}

.left, .right{
     margin-top: 25px;
    margin-bottom: 25px;
}

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

.container{
    border: 1px solid black;
    width: 400px;
    padding: 25px 0;
    white-space: nowrap;
    font-size: 0;
}
.left, .right {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    font-size: 12pt;
}
.left{
    width: 25%;
}
.right{
    width: 75%;
}
img {
    display: block;
}