Vertical text centering in fluid parent and child div

Question

I have this 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;
}

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

And I am getting this:

However I want to center the text part like this:

How to do such thing?

IMPORTANT 1! The vertical text needs to adjust to one line or multiple lines and center that vertically dynamically.

IMPORTANT 2! Everything needs to be fluid! Only % is allowed, no px,pt,em etc. !

HERE IS ALSO JSFIDDLE: http://jsfiddle.net/GkF6R/3/

Answer 1

I did something 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>

Is that what you want?

One really important thing- <img> tag must be just right after </span> . Without spacebar or enter. This is because both elements are inline-block. If you place 'space' or 'enter' the layout will not work the way you want.

Answer 2

Does this work for you?

CSS Snippet

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

Hope it helps!

Answer 3

Looks like you're close to a tabular layout, use the tables vs trying to manipulate <span> and <div> into a table

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>