0

次のように、コンテナ div 内に 2 つの div があるとします。

<div id="wrapper">
    <div id="title">A</div>
    <div id="text">Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... Some text... </div>
</div>

タイトルからわかるように、親 div 内で div を縦titleに並べて並べようとしています。これまでのところ、私のcssは次のとおりです。textwrapper

#wrapper
{       
    vertical-align:middle;
    display:table-cell;
}

#title
{
    background: url('path_to_purple_background') no-repeat;
    width:45px;
    height:45px;
    color:white;    
}

#text {
    width: 700px;
}

#title, #text {
    display: inline-block;
    vertical-align: middle;
}​

しかし、これまでのところ、文字Aはdivの中央に配置されていませんtitle(代わりに、divの左上隅に配置されています)。これを修正する方法を知っている人はいますか?

ありがとうございました

4

3 に答える 3

1

考えただけですtext-align:centerが、追加できるプロパティと追加できるプロパティがあります。これにより、 が円の中心に配置され、 の線の高さが円コンテナーの高さと一致するように設定されるため、垂直方向に中央に配置されます。#titleline-height:HEIGHT OF #TITLE;AA

于 2012-11-25T19:36:10.527 に答える
0

このようなものはどうですか？displayのプロパティをに設定し#test, #titleましたtable-cell。

于 2012-11-25T19:25:56.460 に答える
0

の使い方はvertical-alignよく間違えられます。

W3Cから:

vertical-align プロパティは、インライン レベル要素によって生成されるボックスの行ボックス内の垂直方向の配置に影響します。

したがって、段落にインライン画像がある場合は、それを使用して、テキストのルール内で垂直方向に揃えることができます。

あなたの場合、1 つのルールだけを垂直方向に揃える必要がある場合は、古いline-heightトリックを使用できます。

#title {
  height: 45px;
  width: 45px;
  line-height: 45px;
}
于 2012-11-25T19:50:23.450 に答える