0

テキストが1行に収まる場合と、テキストが2行に収まる場合の両方で、テキストを垂直方向に配置したいと思います。ここにjsFiddleがあります。

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

私のHTMLが次のようになっているとします。

<div class="Container">
   <div class="SomeClass">test text</div>
   <div class="SomeClass">some very very long text</div>  // this text is cut
</div>​

そして、私のCSSは次のようになります。

.Container{
    padding:3px 0px 6px 0px;
    height:30px;
    margin:30px 30px;}

.SomeClass{
    height:30px;
    float:left;
    width:100px;
    overflow:hidden;
    border:1px solid black;
    text-align:center;
    font-family:"Trebuchet MS";
    font-weight:bold;
    font-size:13px;
    line-height:28px;}​

現在、このプロパティを使用していline-heightます。これをコンテナの高さに設定すると、テキストが垂直方向に配置されます。問題は、テキストが2行に収まると、これが機能しなくなることです。.Containerアイテムは特定の高さ/幅である必要があり、そのままにしておく必要があることに注意してくださいoverflow:hidden;

何か提案があれば教えてください。

ありがとう。

4

2 に答える 2

3

まず第一に私はこれを理解していませんでした

.Containerアイテムは特定の高さである必要があり、overflow：hidden;を残しておく必要があることに注意してください。

あなたが固定された高さを与えているなら、私はそれがそこに2行に収まらないと確信しています...

そして答えについては、使用display: table-cell、使用vertical-align: middle;、削除するfloat: left;ことができます.SomeClass

デモ

CSS（もちろん高さで遊ぶことができます）

.Container{
    padding: 3px 0px 6px 0px;
    margin:30px 30px;
    height: 200px;
}

.SomeClass{
    width:100px;
    height: 200px;
    border:1px solid black;
    text-align:center;
    font-family: "Trebuchet MS";
    font-weight: bold;
    font-size: 13px;
    display: table-cell;
    vertical-align: middle;
}
于 2012-12-26T15:03:42.173 に答える
1

CSS3またはテーブルを使用せずに、複数行のテキストを垂直方向に揃える方法はありません。

行の高さはテキストの高さを定義し、1行のテキストを垂直方向に揃えるのに最適な方法です。複数行のテキストは行の高さを使用して整列することもできますが、今回は、行の高さが2行の場合は2倍、3行の場合は3倍になるなど、適切なマージン計算を行う場合は注意が必要です。

CSS3を使用するか、phpまたは他のサーバー側言語を使用して改行を強制
し、次に適切なcssを使用してテキストを垂直方向にオフセットすることをお勧めします。

于 2012-12-26T15:05:56.167 に答える