2

スパン内のテキストを、隣接するテキストに対して中央に垂直に揃えようとしています。これは簡単に実現できますが、スパン内のテキストが 2 行を占める場合、テキストは途切れます。この問題を解決するには、テキストが 2 行を占めるときにスパンの高さを拡張するか、何らかの方法でテキストを中央に揃える必要があります。

問題の実例はここにありますhttp://jsfiddle.net/BxLnN/

任意の提案や解決策をいただければ幸いです。

含まれている要素の現在の寸法は同じままでなければなりません。

乾杯！

html

<div class="divisions_container">
    <div class="division">
        <div class="div_head">
            DIVISION 1 <span>SIX WINNING NUMBERS</span>
        </div>
        <div class="div_head">
            DIVISION 2
            <div>
                <span>FIVE WINNING NUMBERS PLUS ONE OF THE TWO SUPPLEMENTARY NUMBERS</span>
            </div>
        </div>
    </div>
</div>

CSS

/* division winnings */
.divisions_container {
    font-size: 13px;
    padding: 0 10px;
    width: 7.4cm;
    height: 8.5cm;
}
.div_head {
    margin-top: 20px;
    text-align: left;
    padding-left: 5px;
    position: relative;
    background-color: #000;
    color: #fff;
    max-height: 6mm;
    font-weight: bold;
    font-size: 1.2em;
    }
/* # winning numbers */
.div_head span {
    font-size: 0.5em;
    vertical-align: middle;
    font-weight: 200;
    border: 1px solid red;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 100px;
}
4

4 に答える 4

2

を持っていspanますposition: absolute;。要素を絶対配置にすると、余白のない要素になり、および要素でのみ機能するため、block使用できません。vertical-aligninlineinline-block

だから私はこのCSSを提案します：

/* division winnings */
.divisions_container {
    font-size: 13px;
    padding: 0 10px;
    width: 7.4cm;
    height: 8.7cm;
}
.div_head {
    margin-top: 20px;
    text-align: left;
    padding-left: 5px;
    position: relative;
    background-color: #000;
    color: #fff;
    max-height: 6mm;
    font-weight: bold;
    font-size: 1.2em;
    }
/* # winning numbers */
.div_head span {
    font-size: 0.5em;
    vertical-align: middle;
    font-weight: 200;
    border: 1px solid red;
    display: inline-block;

}

.div_head div {position: absolute;
    right: 0;
    top: -2px;
    bottom: 0;
    left: 100px;
}

フィドル: http://jsfiddle.net/praveenscience/BxLnN/1/

于 2013-03-07T08:24:03.570 に答える
1

これを試してみてください...スパンと位置の幅を相対的に指定し、上と左の値を増減する必要があります。

.div_head span {
    font-size: 0.5em;
    vertical-align: middle;
    font-weight: 200;
    border: 1px solid red;
    display: inline-block;
    position: relative;
    right: 0;
    top: -20px;
    bottom: 0;
    left: 100px;
    text-align: left;
    width: 200px;
}
于 2013-03-07T08:41:02.737 に答える
1

固定の高さをスパンなどに設定できる場合は、スタイルで20px次を使用できます。これにより、テキストが自動的に中央に配置されます。line-height: 20px.div_head spanspan

display: inline-blockまた、そのように設定する必要はありませんvertical-align: middle。

例: http://jsfiddle.net/BxLnN/2/

于 2013-03-07T08:26:34.293 に答える
0

これを試してみてください...スパンの幅と相対的な位置を指定し、上下の値を増減する必要があります。

.div_head span {
    font-size: 0.5em;
    vertical-align: middle;
    font-weight: 200;
    border: 1px solid red;
    display: inline-block;
    position: relative;
    right: 0;
    top: -20px;
    bottom: 0;
    left: 100px;
    text-align: left;
    width: 200px;
}

素敵なものはここに ありますHTML

<div class="Division_Container">
<span>Division 1</span>
<span class="Inner_Container">
six winning numbers
</span>
</div>
<div class="Division_Container">
<span>Division 2</span>
<span class="Inner_Container">
five winning numbers and rest of the nubmers to be displayede winning numbers and rest of the nubmers to be displayed
</span>
</div>
<div class="Division_Container">
<span>Division 2</span>
<span class="Inner_Container">
five winning numbers and rest of the nubmers to be displayede winning n
</span>
</div>

CSS

.Division_Container{display: block; width: 300px; background: #000; color: #fff; margin: 10px;}
.Inner_Container{display: inline-block; vertical-align: middle; left: 200px;  width: 200px; margin-left: 20px; border: 1px solid red;}
/* If you want to specify height add following */
.Division_Container:before{content: "."; display: inline-block; height: 100px; vertical-align: middle; visibility: hidden;}
于 2013-03-08T03:12:34.717 に答える