###前提・実現したいこと
HTML5とCSS3(およびsass compass skeleton)を用いてWebサイトを作成しており、flexboxとsass(compass?)の@mixinであるalign-items(center)を用いて、とあるテキストを背景となるクラスの上下中央に配置したいと考えています。
以下ソースコードのように記述したところ、chrome(PC)では意図のとおりテキストが背景となるクラスの上下中央に配置されたのですが、Safari(PC,スマートフォン)やchrome(スマートフォン)ではテキストが上方に配置されてしまい、@mixin align-items(center)が効いていないように見受けられます。(IEその他のブラウザについては未検証です。)
原因および対処法をご教示下さい。
また、上記以外に実現方法等ございましたら、あわせてご教示頂けますと幸甚です。
よろしくお願いいたします。
###該当のソースコード
html
1 <div class="cover_area"> 2 <div class="container"> 3 <div class="row"> 4 <div class="twelve columns flex_box"> 5 <p>テキスト</p> #上下中央寄せしたい対象のテキスト 6 <div class="owl-carousel owl-theme"> 7 <div><img class="u-max-full-width" src="images/cover_one.jpg" alt="cover" ></div> 8 <div><img class="u-max-full-width" src="images/cover_two.jpg" alt="cover" ></div> 9 <div><img class="u-max-full-width" src="images/cover_three.jpg" alt="cover" ></div> 10 </div> 11 </div> 12 </div> 13 </div> 14 </div>
css
1@import "compass"; 2 3〜 4 5.cover_area{ 6 7 text-align: left; 8 position: relative; 9 10 .container { 11 max-width: 100%; 12 width: 100%; 13 @media (max-width: 549px) { 14 padding: 0; 15 } 16 //skeletonのcontainer設定を初期化 17 } 18 19 .flex_box { 20 @include display-flex; 21 @include align-items(center); 22 display:-webkit-box;/*--- Androidブラウザ用 ---*/ 23 display:-ms-flexbox;/*--- IE10 ---*/ 24 display:-webkit-flex;/*--- safari(PC)用 ---*/ 25 -webkit-box-align: center;/*--- Androidブラウザ用 ---*/ 26 -ms-flex-align: center;/*--- IE10 ---*/ 27 -webkit-align-items: center;/*--- safari(PC)用 ---*/ 28 } 29 30 p { 31 position: absolute; 32 left: 4%; 33 z-index: 998; 34 35 @media (min-width: 550px) { 36 @include fontsize(36); 37 line-height: 2.1; 38 } 39 40 @media (max-width: 549px) { 41 @include fontsize(18); 42 line-height: 2; 43 } 44 } 45}
###試したこと
以下、sassとcompassの@mixinのリファレンスを確認しました。
https://gist.github.com/richardtorres314/26b18e12958ba418bb37993fdcbfc1bd
http://compass-style.org/reference/compass/css3/flexbox/#mixin-align-items
が、以下のことがわかりませんでした…。
・compassのalign-items(center);のリファレンスの内容
・今の私の状況では、sassとcompassのどちらのalign-items(center);が適用されているのか(compass?)
sassのリファレンスを見ると、@include align-items(center);と記述すれば全てのブラウザに対応可能に見えましたが、実際上手くいっていません。
###補足情報(言語/FW/ツール等のバージョンなど)
OSのバージョンはいずれも最新です。
回答3件
あなたの回答
tips
プレビュー