2

私は次のhtmlを持っています....

<div>
    <img src="" /> 
    <span>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    </span>
</div>

そしてcss....

img{
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
    float: left;
    vertical-align: middle; /* not worked.... */
}
span{
    overflow: hidden;
    display: block;
    padding-left: 10px;
}

デモ

デモでわかるように、テキストに対して垂直に揃えたい赤いボックス。400px などの div の高さを指定することもできます。

4

3 に答える 3

3

これを行う場合は、テーブル表示を使用します (最新のすべてのブラウザーで動作します)。

まず、マークアップを変更して、独自の でラップします (これが表のセルとして機能します) img。span

...
<span>
    <img />
</span>
<span>
    ...
</span>

次に、次のスタイルを適用します。

div {
    display:table;
}

span {
    display:table-cell;
    vertical-align:middle;
    padding-left:10px;
}

span:first-child {
    padding-left:0;
}

img {
    width:50px;
    height:50px;
    background:#f00;
}

JSFiddle デモ。

于 2013-10-21T10:41:22.673 に答える
1

次の CSS を使用して、赤い正方形のモチーフの絶対配置を使用して、同様の結果を達成することもできます。

div {
    border: 1px dotted blue;
    position: relative;
    min-height: 50px;
}
img{
    width: 50px;
    height: 50px;
    background-color: red;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -25px;
}
span{
    display: block;
    margin-left: 60px;
}

親コンテナーに設定position: relativeし、絶対配置を使用imgして上から 50% を配置し、適用margin-top: -25pxして親コンテナーの高さに対して垂直方向に配置します。

margin-left: 60pxにテキストを設定しspanて、正方形のモチーフのためのスペースを確保する必要があります。

1 つの利点は、設計が に依存しないことdisplay: table-cellです。

欠点の 1 つは、高さが 50px 未満のテキスト ブロックの場合、テキストが正方形の上端に揃えられることです。これは、設計要件によっては適切でない場合があります。

デモを参照してください: http://jsfiddle.net/audetwebdesign/796us/

脚注:display: table-cell個人的には、ブラウザがサポートしている限り、より堅牢なソリューションだと思います。がサポートされていない場合table-cell、デザインはテキスト ブロックの上端に揃えられたモチーフに優雅に低下します。これは、短いテキスト ブロックでの絶対配置オプションの制限と同等です。

于 2013-10-21T11:13:28.053 に答える
0

vertical-alignプロパティは、James Donelly の回答で言及されているように、table要素または要素に対してのみ許可されtable-cellますが、代わりに次を使用できます。

margin-top: 50%;例を参照してください: http://jsfiddle.net/KGg6H/19/

于 2013-10-21T10:45:07.407 に答える