質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.34%

FireFoxでmin-heightが効かない

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 6,718

agent

score 14

前提・実現したいこと

HTMLでh2要素の高さの最低値を指定し、文字の高さを中央寄せにしたい。

発生している問題・エラーメッセージ

FireFoxではh2の高さがmin-heightで指定した値よりも低くなってしまいます。
Chrome、IE、Edgeでは正常です。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        h2{
            min-height:150px;
            display:table;            
        }

        h2 span{
            display:table-cell;
            vertical-align:middle;
            background-color:aliceblue;
        }
    </style>
</head>
<body>
      <h2><span>中央に寄せたいテキスト</span></h2>
</body>
</html>

補足情報

中央に寄せたいテキストは何行になるか分からないため、min-heightで最低の高さを指定したいです。

下記のページでも同様の現象です。
左サイドメニューの「学部・大学院」というオレンジ色の箇所、右コンテンツ領域の紺色の帯の箇所が、FireFoxでは高さが低くなってしまいます。
http://www.tau.ac.jp/department/graduateschool/index.html

よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

0

45文字くらいまでなら下記でいけます。(IE/Firefox対応)
この位置に50文字近く入るというのはそもそも変なので、多くの場合問題ないと思います。

#sidebar h2 {
    background: #de7a54 url("../img/common/side_title_bg.png") no-repeat scroll 0 0;
    color: #fff;
    display: block; /*  */
    font-size: 20px;
    font-weight: normal;
    min-height: 138px;
    position: relative; /*  */
    width: 100%;
}
#sidebar h2 span {
    box-sizing: border-box;
    display: block;
    left: 0;
    line-height: 1.2;
    padding: 15px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(0px, -50%);
    width: 100%;
}
45文字サンプル:
学部・大学院学部・大学院学部・大学院学部・大学院学部・大学院学学部・大学院部・大学院大学院

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/05 02:00

    ありがとうございます。問題なく表示されました。
    HTMLにIEのためのコードを書かなくても良い点でこちらをベストアンサーとさせていただきます。

    キャンセル

0

diplay:tabe-cellではなく、以下のコードでいかがでしょうか。

display: block;
    vertical-align: middle;
    line-height: 50px;

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/04 22:02

    ありがとうございます。こちらではmin-heightの高さになりませんでした。

    キャンセル

0

オレンジの箇所はこちらでいけました。
display-table-cellは残したまま、line-heightをboxの高さに合わすと、いけました。

sidebar h2 span {

    display: table-cell;
    vertical-align: middle;
    line-height: 138px;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/05 00:03

    ie11だけですが、min-heightのbugがあるようです。
    https://connect.microsoft.com/IE/feedback/details/816293/ie11-flexbox-with-min-height-not-vertically-aligning-with-align-items-center

    ですので、ieのみに最初のdisplay:tableを指定する方法での対処はいかがでしょうか。

    ieのみ条件分岐、他にもやり方があると思いますが、以下になります。

    <!––[if IE ]>
    <body class="ie">
    <![endif]––>
    <!––[if !IE]>––>
    <body>
    <!––<![endif]––>


    .ie .bg_blue_title, .bg_blue_title_noLink {
    position: relative;
    display: table;
    background: #24305F url(../img/common/bg_blue_title.png) 0 0 no-repeat;
    color: #FFF;
    padding: 8px 45px 8px 15px;
    font-size: 16px;
    line-height: 1.4;
    width: 100%;
    min-height: 66px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: normal;
    }
    .ie .bg_blue_title span, .bg_blue_title_noLink span {
    display:tabe-cell;
    vertical:align-middle;
    }

    キャンセル

  • 2016/06/05 00:33

    ありがとうございます。
    親要素にieというclassがつくようにするのですね。
    試してみたいと思います。

    キャンセル

  • 2016/06/05 02:02

    遅くまでご対応いただきまして、ありがとうございました。
    display: flexというものがあることを知れて、大変勉強になりました。
    今後ともよろしくお願い致します。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る