2

我有这个 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/

4

3 回答 3

2

我做了这样的事情......

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>。没有空格键或输入。这是因为这两个元素都是内联块。如果您放置“空格”或“输入”，则布局将无法按您想要的方式工作。

于 2012-12-19T21:05:28.660 回答
0

这对你有用吗？

CSS 片段

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

希望能帮助到你！

于 2012-12-19T20:47:09.463 回答
-1

看起来您接近表格布局，使用表格与尝试操作<span>并<div>进入表格

示例 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>
于 2012-12-19T21:13:12.340 回答