Q&A
ありがとうございます。line-heightを指定すると、2行以上になったときに行間が開きすぎてしまいました。
line-heightは変更せずに実現できれば幸いです。
###前提・実現したいこと
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
よろしくお願い致します。
回答3件
0
ベストアンサー
45文字くらいまでなら下記でいけます。（IE/Firefox対応）
この位置に50文字近く入るというのはそもそも変なので、多くの場合問題ないと思います。
CSS
1#sidebar h2 { 2 background: #de7a54 url("../img/common/side_title_bg.png") no-repeat scroll 0 0; 3 color: #fff; 4 display: block; /* */ 5 font-size: 20px; 6 font-weight: normal; 7 min-height: 138px; 8 position: relative; /* */ 9 width: 100%; 10} 11#sidebar h2 span { 12 box-sizing: border-box; 13 display: block; 14 left: 0; 15 line-height: 1.2; 16 padding: 15px; 17 position: absolute; 18 text-align: center; 19 top: 50%; 20 transform: translate(0px, -50%); 21 width: 100%; 22}
45文字サンプル： 学部・大学院学部・大学院学部・大学院学部・大学院学部・大学院学学部・大学院部・大学院大学院
投稿2016/06/04 15:11
編集2016/06/04 15:13
総合スコア69398
0
オレンジの箇所はこちらでいけました。
display-table-cellは残したまま、line-heightをboxの高さに合わすと、いけました。
#sidebar h2 span {
display: table-cell;
vertical-align: middle;
line-height: 138px;
}
投稿2016/06/04 12:48
退会済みユーザー
総合スコア0
こちらでいかがでしょうか。
.bg_blue_title, .bg_blue_title_noLink {
position: relative;
display: flex;
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;
}
.bg_blue_title span, .bg_blue_title_noLink span {
margin: auto 0;
}
親divにdisplay:flexを指定し、子には、margin:auto 0でfirefoxになります。
旧ブラウザの配慮も考え、以下のベンダープレフィックスと案件によってie8,9へのflexibility.jsも必須になります。
display: -ms-flex;
display: -moz-flex;
display: -webkit-flex;
display: flex;
帯の部分を
display: flex;
として
帯内の文字列<span>部分を
margin: auto 0;
とするのですね。
度々申し訳ございません。
ChromeとFireFox、Edgeは大丈夫だったのですが、IEで文字が上寄せになってしまいました。
調べてみますが、もし解決方法がありましたら教えて頂けますと幸いです。
ieのバージョンを教えていただけますでしょうか。
子要素に、flex:0 0 autoを入れていただけますでしょうか。
.bg_blue_title span, .bg_blue_title_noLink span {
margin: auto 0;
flex:0 0 auto;
}
大変失礼いたしました。22:27のコメントを見落としておりました。すぐに再検証させていただきます。
IEのバージョンは11です。
親divに以下を追加を試していただけますでしょうか。
display: -ms-flexbox;
-ms-flex-direction: row;
下記のようにしてみましたが駄目でした。
IEバージョン11です。
とりあえず、IE8、9への対応は不要です。
解決方法が分かりましたらご助言頂けますと幸いです。
.bg_blue_title, .bg_blue_title_noLink {
position: relative;
display: -ms-flex;
display: -moz-flex;
display: -webkit-flex;
display: flex;
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;
}
.bg_blue_title span, .bg_blue_title_noLink span {
margin: auto 0;
flex: 0 0 auto;
}
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;
}
ありがとうございます。
親要素にieというclassがつくようにするのですね。
試してみたいと思います。
遅くまでご対応いただきまして、ありがとうございました。
display: flexというものがあることを知れて、大変勉強になりました。
今後ともよろしくお願い致します。
0
diplay:tabe-cellではなく、以下のコードでいかがでしょうか。
display: block; vertical-align: middle; line-height: 50px;
投稿2016/06/04 12:45
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/04 17:00