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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

compass

CompassはSassを拡張したオープンソースのCSSフレームワークです。 特徴は、ベンダープレフィックス等の複雑なCSSを手軽に記述できる点、 CSSスプライト画像を簡単に作成できる点などが挙げられます。

Q&A

解決済

3回答

1132閲覧

flexboxのalign-items(center)がchrome(PC)にしか反映されない

mhiroki

総合スコア8

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

compass

CompassはSassを拡張したオープンソースのCSSフレームワークです。 特徴は、ベンダープレフィックス等の複雑なCSSを手軽に記述できる点、 CSSスプライト画像を簡単に作成できる点などが挙げられます。

0グッド

0クリップ

投稿2017/08/20 16:31

編集2017/08/22 01:50

###前提・実現したいこと
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 34 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のバージョンはいずれも最新です。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2017/08/22 01:37

chrome(PC)でも意図通りとは思えません。必要なコードが提示されているかご確認ください。
mhiroki

2017/08/22 01:51

おっしゃる通り、質問用にコードをデフォルメしていました。コードを更新しましたので、引き続きどうぞよろしくお願い申し上げます。
guest

回答3

0

ベストアンサー

絶対配置でもはやFlex関係なくなってますが

CSS

1p { 2 margin: 0; 3 top: 50%; 4 -webkit-transform: translateY(-50%); 5 transform: translateY(-50%); 6}

投稿2017/08/22 02:31

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mhiroki

2017/08/22 02:44

無事解決できました。ありがとうございました。
mhiroki

2017/08/22 05:10

ちなみにですが、なぜ私の方法では上手くいかなかったについても、おわかりになりましたら後学のためにご教示頂けますと幸甚です。 よろしくお願いいたします。
x_x

2017/08/22 05:20

コメントが反映されずに投稿してしまったみたいですね。 Flexというよりは、絶対配置における中央表示なのです。
mhiroki

2017/08/22 05:27

ご回答ありがとうございます。理解が及ばず申し訳ございません…。 今回のご回答(=絶対配置における中央表示?)ではwebkitにてos間の差異をなくすことができましたが、なぜ私の方法(flexを利用した中央表示)はos間で差異が解消できなかったのでしょうか。
x_x

2017/08/22 05:43

すみませんが、わたしの環境(PCのChrome)では、(更新された)提示コードだけでは中央になっていません。
mhiroki

2017/08/22 05:47

そうなのですか…。ではそもそもChrome(PC)でも上手くいってない可能性があるということですね。(私のPCではなぜか上下中央に表示されるのですが…。) 今後はご教示頂いた方法を活用させて頂きたいと思います。 大変勉強になりました。ありがとうございました。 またわからないことが発生した際はどうぞよろしくお願いいたします。
guest

0

owl-carouselのimg画像を背景に、問題のテキストを上下中央に配置したいと考えております。

その場合はアプローチの方法が変わってきます。

<div class="twelve columns">ではなく、その中のpをflexにして、且つabsoluteで配置します。 まずhtmlはこのように ```html <div class="cover_area"> <div class="container"> <div class="row"> <div class="twelve columns"> <p class="cover_text">テキスト</p> <div class="owl-carousel owl-theme"> <div><img class="u-max-full-width" src="images/cover_one.jpg" alt="cover" ></div> <div><img class="u-max-full-width" src="images/cover_two.jpg" alt="cover" ></div> <div><img class="u-max-full-width" src="images/cover_three.jpg" alt="cover" ></div> </div> </div> </div> </div> </div> ```

で、pに以下のスタイルを充てます

CSS

1.cover_text { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 position: absolute; 6 left: 0; 7 top: 0; 8 z-index: 999; 9 margin: 0; 10 height: 100%; 11 width: 100%; 12}

一応、Sarari以外の主要ブラウザで確認したので、これで問題ないはずです。

投稿2017/08/22 02:34

OsCh

総合スコア111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mhiroki

2017/08/22 02:47

x_x様のご回答で無事解決いたしました。 OsCh様につきましても何度もご対応、ご回答頂きまして誠にありがとうございました。 今後ともどうぞよろしくお願いいたします。
guest

0

とりあえずこれで試してみてください

sass

1.flex_box { 2 @include display-flex; 3 @include align-items(center); 4 @include justify-content(center); 5}

あと、.containerや.rowのスタイルも載せていただいた方がより細かく調べることができます。

投稿2017/08/21 06:15

OsCh

総合スコア111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mhiroki

2017/08/22 01:15

ご回答ありがとうございました。 残念ながら、頂いたご回答では解決しませんでした。 (実現したいのは上下中央寄せであり、左右は関係ないため justify-contentは不要の認識ですが、必要でしょうか。) また、.containerや.rowについては以下、skeleton標準(skeleton.cssに記述の内容)です。 .container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .container:after, .row:after, .u-cf { content: ""; display: table; clear: both; } 引き続き、どうぞよろしくお願いいたします。
OsCh

2017/08/22 01:43 編集

だいたい理解しました。 問題は.flex_boxに高さが無い事だと思います。 .cover_area のheightを100pxで指定しているので、flex_boxの高さも100pxで良ければ、 .flex_box { display: flex; align-items: center; height: 100px; } で解決すると思います。 もしくは、.flex_boxの高さを可変にしたい場合は、height:100% を指定すれば良いですが、親の要素に高さの指定が無い場合は無効になります。 なので、今回のケースで考えると、 .cover_area, .container, .container .row, .flex_box{ height:100%; } で機能すると思われます。 あと、 > (実現したいのは上下中央寄せであり、左右は関係ないため justify-contentは不要の認識ですが、必要でしょうか。) 不要です。左右も必要と思った私の勘違いです。 失礼しました。
mhiroki

2017/08/22 01:55

ご回答ありがとうございます。 そして大変申し訳ございません、上記x_xさんのご指摘により、コードを質問用にデフォルメしたものから本来のものに更新しました。(実際には.containerには高さを指定していません。高さは、owl-carouselで使用しているimgの高さに依存しています。) せっかくご回答頂いたのに大変申し訳ございませんでした。 引き続き、どうぞよろしくお願い申し上げます。
OsCh

2017/08/22 02:03

ぱっと見で凄く気になったんですが。 p { position: absolute; ↑もしかするとこれが原因ではないでしょうか? その他も調べてみますが、とりあえずこれを消して試してみてください。
mhiroki

2017/08/22 02:17

ご回答ありがとうございます。 残念ながら、頂いたご回答では解決しませんでした。 実現したいことをもう少し詳細にご説明しますと、owl-carouselのimg画像を背景に、問題のテキストを上下中央に配置したいと考えております。 position: absolute;(.containerのposition: relative;)を外してしまうと、テキストと背景画像が並列に配置されてしまうため、外すことができません。 引き続き、どうぞよろしくお願い申し上げます。
OsCh

2017/08/22 02:28

Markdown使いたいので、新しい回答欄を使います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問