以流动的父母和子女为中心的垂直文本

Question

我有这个CSS：

div#all {
    width: 100%;
    height: auto;
    float: left;
    background: blue;
    position: relative;
}

div#left {
    width: 47%;
    float: left;
    font-size: 13px;
    height: auto;
    display: table;
    text-align: center;
    overflow: hidden;
    background: green;
    position: relative;
}
div.box span {
    width: 100%;
    background: red;
    display: table-cell;
    vertical-align: middle;
}

img#right {
    width: 53%;
    height: auto;
    float: right;
    display: block;
}

和这个HTML：

<div id="all">
    <div id="left">

        <span>
        My long text bla bla bla sadf asdfasdfasd fasdf asdfsadfasdf
        </span>


    </div>

    <img id="right" src="http://asset3.cbsistatic.com/cnwk.1d/i/tim/2012/09/19/35446285_620x433.jpg">
</div>

我得到了这个：

但是我希望将文本部分置于中心位置：

怎么做这样的事情？

重要1！垂直文字需要调整为一行或多行并垂直动态居中。

重要2！一切都需要流畅！只允许％，没有px，pt，em等！

这里也是JSFIDDLE： http://jsfiddle.net/GkF6R/3/

Answer 1

我做了一些like this ...

的 CSS： 的

div#all {
   width: 100%;
   height: 100%;
   overflow: hidden;
   background: blue;
   position: relative;
}

div span {
   width: 40%;
   background: red;
   padding-left: 10%;
   display: inline-block;
   vertical-align: middle;
}

img#right {
   width: 50%;
   height: auto;

   display: inline-block;
   vertical-align: middle;
}

的 HTML： 的

<div id="all">
    <span>
    My long text bla bla bla sadf asdfasdfasd fasdf asdfsadfasdf
    </span><img id="right" src="http://asset3.cbsistatic.com/cnwk.1d/i/tim/2012/09/19/35446285_620x433.jpg">
</div>

这就是你想要的吗？

一个非常重要的事情 - <img>标记必须在</span>之后。没有空格键或输入。这是因为两个元素都是内联块。如果您放置“空格”或“输入”，布局将无法按您的方式工作。

Answer 2

Does this work for you?

CSS代码段

div span {
    top: 50%;
    position: absolute;
    color: red;
}

希望它有所帮助！

Answer 3

看起来您接近表格布局，使用表格与尝试操纵<span>和<div>到表格

example jsfiddle

CSS

#all {border-collapse:collapse;background:blue;width:100%;}
#all .desc {width:49%;max-width:49%;vertical-align:middle;}
#all .desc p {background:green;text-align:center;}
#all .img {width:51%;line-height:0;font-size:0;}
#all img {width:100%;}

HTML

<table id="all">
    <tr>
        <td class="desc">
            <p>My long text bla bla bla sadf asdfasdfasd fasdf asdfsadfasdf</p>
        </td>
        <td class="img">
            <img src="http://asset3.cbsistatic.com/cnwk.1d/i/tim/2012/09/19/35446285_620x433.jpg">
        </td>
    </tr>
</table>