4

タイトルのように、CSSを使用してdivの近くに垂直方向の中央にテキストを配置することはできません。グーグルとスタックオーバーフローで検索したので、ここで質問することにしました。

これは私がPaintで行う必要があることの例です：

ここに画像の説明を入力してください

テーブルセルとボックスのソリューションを表示してみましたが、左上にフローティングdivがない場合にのみ機能します。

テキストが青いdivよりも長い場合は、フローティングdivを使用する通常のテキストと同じようにdivの下に配置する必要があります。

私は唯一のCSSソリューションを探しています、それはできるかどうか？

4

3 に答える 3

2

それが可能かどうかは完全にはわかりませんが、これが私の最善の試みです。少なくとも最初の 2 つの例では機能します。

<div class="wrap">
    <div class="invisible"></div>
    <img src="http://placehold.it/140x100">
    <p>Lorem ipsum.</p>
</div>

<div class="wrap">
    <div class="invisible"></div>
    <img src="http://placehold.it/140x100">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, nibh in molestie sodales, risus turpis vehicula tellus, vitae lobortis ligula tortor in enim.</p>
</div>

<div class="wrap">
    <div class="invisible"></div>
    <img src="http://placehold.it/140x100">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, nibh in molestie sodales, risus turpis vehicula tellus, vitae lobortis ligula tortor in enim. Proin venenatis arcu id enim rutrum eget condimentum urna venenatis. Suspendisse at tortor nisi, in tempus ligula. Maecenas nisl felis, bibendum ut luctus nec, bibendum sit amet erat.</p>
</div>

CSS:

.wrap {
    width:500px;
    border:1px solid red;
    margin:10px;
}
.wrap:before {
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
    margin-left:-0.25em; /* adjusts spacing */
}
p {
    display:inline-block;
    vertical-align:middle;
    width:350px;
}
img {
    float:left;
}

.invisible {
    height:100px;
    display:inline-block;
    vertical-align:middle;
}

フィドル。_

于 2012-11-01T23:16:27.597 に答える
-1

これは css のみでは不可能です。（間違っていることが証明されれば幸いです。）

于 2012-11-01T22:46:42.527 に答える