0

HTMLコードは次のとおりです。

    <div id="homepage_boxes_holder">
        <div class="homepage_boxes">
            <h3 class="box_heading">Test</h3>
        </div>
        <div class="homepage_boxes">
            <h3 class="box_heading">Test</h3>
        </div>
        <div class="homepage_boxes">
            <h3 class="box_heading">Test</h3>
        </div>
    </div>

CSSは次のとおりです。

.homepage_boxes{
    width: 300px;
    height: 200px;
    float: left;
    margin-top: 100px;
    margin-right: 80px;
    margin-left: 150px;
    line-height: 10;
}

.box_heading{
    text-align:center;
    font-family: BebasNeue;
    font-size: 30px;
    padding: 0;
    margin: 0;
    border: 1px solid black;
}

なんらかの理由で、h3 が div 内の膨大なスペースを占有しています (パディングが大きいように見えますが、0 に設定しているため、そうではありません)。説明のために に境界線を付けました.box_heading。画像はこちら：

画像へのリンク: http://imgur.com/vDs1KYs
- 青は div の境界線、黒は H3 の境界線です。

編集:可能であれば、境界の外に押し出すのではなく、見出しをdivの中央に配置したいと思います。

4

4 に答える 4

1

これは、親要素に a を追加したためですline-height: 10;。これにより、各行の高さが10 倍になります。

それを削除するだけで機能します。

働くフィドル

アップデート

h3要素をその親の中間に保持するには、その要素line-heightの親としてa を設定heightできます (この場合、この CSS 宣言を親要素とh3要素の両方に適用できます)。

.homepage_boxes {
    /* ... */
    line-height: 200px;  /* as the same of the parent's height */
}

更新されたフィドル

別のオプションは、固定を設定せずに親padding要素の上部と下部に同じを設定することです。これにより、子が中央になります。height

JSFiddleデモ

于 2014-01-24T08:32:33.160 に答える
0

line-height: 1em; を追加するだけです。.box-heading クラスの説明に。line-height 属性は、フォントの「アセント」または「アセンダーの高さ」を変更して、それを高くします。

于 2014-01-24T08:31:38.267 に答える
0

これをh3に追加するだけです：

line-height: 1em;

http://jsfiddle.net/B7ZTw/

テキストを両方向の中央に配置するには、h3 に以下を追加してください。

position: relative;
top: 50%;
margin-top: -0.5em;

ここで行うことは、h3 を上から 50% (つまり中央) に設定しますが、要素の高さの半分を差し引いて、50% から開始せず、中央に配置するようにします。

ここを参照してください：http://jsfiddle.net/B7ZTw/2/

于 2014-01-24T08:24:29.327 に答える
-1

可能であれば、静的な高さを設定できます

于 2014-01-24T08:23:46.800 に答える