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

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

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

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

3497閲覧

text-align:centerを指定した箇所が、iPhone版Safariで、ときどき、英字のみズレる

oreha_ohtakumin

総合スコア7

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

0クリップ

投稿2018/10/29 13:32

タイトルの通りです。iPhone版Safariで、キャッシュを削除した最初のアクセスで、英字だけ右側にズレて表示され、リロードすると中央寄せになります。text-alignに他の値を指定して表示ズレが起きている箇所は見つかりませんでした。

コードは以下のような記述です。

HTML

<h1> <div class="en">PRIVACY POLICY</div> <div class="ja">個人情報利用規約</div> </h1>

CSS

.sans { //BODY要素にかかっているfont-family font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; } .en { font-family: Century Gothic, "Century Gothic", "Muli", sans-serif; } h1 { margin-bottom: 30px; opacity: 0; text-align: center; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); -webkit-animation: 0.55s 1.5s slideUp10px linear, 0.55s 1.5s fadeIn linear; -moz-animation: 0.55s 1.5s slideUp10px linear, 0.55s 1.5s fadeIn linear; -ms-animation: 0.55s 1.5s slideUp10px linear, 0.55s 1.5s fadeIn linear; -o-animation: 0.55s 1.5s slideUp10px linear, 0.55s 1.5s fadeIn linear; animation: 0.55s 1.5s slideUp10px linear, 0.55s 1.5s fadeIn linear; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } h1 .en { margin-bottom: 12px; font-weight: bold; text-indent: 0.2em; letter-spacing: 0.2em; } h1 .ja { color: #444; text-indent: 0.1em; letter-spacing: 0.1em; } @media (min-width: 769px) { h1 .en { font-size: 2.4rem; } h1 .ja { font-size: 1.2rem; } } @media (max-width: 768px) { h1 .en { font-size: 2rem; } h1 .ja { font-size: 1rem; } }
x_x👍を押しています

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

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

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

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

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

m.ts10806

2018/10/29 14:56

他のOS,ブラウザではどのような挙動になるのでしょうか。
oreha_ohtakumin

2018/10/29 15:00

MacPC(Safari含む)、WindowsPC、Android Google Chrome、iPhone Google Chromeで異常なく中央寄せになりました。
guest

回答3

0

自己解決

Safariの少し前のVer.でしか再現できないという情報が入りましたが、理由は分からずじまいです。
結局、高さをpxで指定して、position: absolute; left: 50%; translate: translateX(-50%); で対応しました。ありがとうございました。

投稿2018/10/30 09:45

oreha_ohtakumin

総合スコア7

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

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

0

text-alignプロパティはブロック要素の中のインライン要素に効くCSSプロパティです。
div要素はブロック要素ですから、インライン要素であるspan要素などに変えてあげると良いと思います。

HTML

1<h1> 2 <span class="en">PRIVACY POLICY</span> 3 <span class="ja">個人情報利用規約</span> 4</h1>

投稿2018/10/30 03:58

hibikikudo

総合スコア238

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

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

oreha_ohtakumin

2018/10/30 05:10

ご回答ありがとうございます。 h1の子要素自体ではなく、子要素の中の文字が中心寄せになってくれればよいのですが……
guest

0

iPhone環境がすぐ手元にないので確認できないですが、
CSSファイル読み込みのlinkにクエリストリングをつけてはいかがでしょうか。

投稿2018/10/29 23:41

m.ts10806

総合スコア80765

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問