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！垂直方向のテキストは、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>

それはあなたが望むものですか？

本当に重要なことの1つは<img>、タグが直後にある必要があります</span>。スペースバーなしまたはEnterキーを押します。これは、両方の要素がインラインブロックであるためです。「スペース」または「入力」を配置すると、レイアウトは希望どおりに機能しません。

于 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 に答える