豎排文字居中

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

看起來你接近一個表格佈局，使用的表VS試圖操縱<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>