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

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

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

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

4608閲覧

iPhoneでのセンタリング(text-align:center)について

nomori7010

総合スコア36

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/05/31 04:34

次のように<ons-button>を配置しましたがiPhoneで表示すると中央に配置されません。
何か別に設定が必要なのでしょうか。
Androidでは問題なく中央に配置されます。

html

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="components/monaca-jquery/jquery.js"></script> 9 <script src="lib/onsenui/js/onsenui.min.js"></script> 10 <script src="components/app.js"></script> 11 12 <link rel="stylesheet" href="components/loader.css"> 13 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 14 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 15 <link rel="stylesheet" href="css/style.css"> 16</head> 17<body> 18 <div style="text-align:center;"> 19 <ons-navigator id="myNavigator" page="LoginInformation.html" > 20 </ons-navigator> 21 </div> 22 <ons-template id="LoginInformation.html"> 23 <ons-page> 24 <ons-toolbar> 25 <div class="center">ページ</div> 26 </ons-toolbar> 27 <div style="text-align: center;height: 30%;padding: 40% 0% 0% 0%;"> 28 ボタンを押してください。 29 </div> 30 31 <div style="text-align: center"><!--←ここでスタイル指定--> 32 <ons-button onclick="login()" modifier="large"> 33 ボタン1 34 </ons-button> 35 </div> 36 </ons-page> 37 </ons-template> 38</body> 39</html>

css/style.css

css

1.button--large{ 2 background-color:#3bc5ae; 3 margin-bottom:10px; 4 width:90%; 5}

iPhoneでの表示結果

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

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

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

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

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

guest

回答2

0

onsenUIではandroidとiOSでCSSの該当箇所が切り替わります。
iOSでプレビューをしているときに、開発者ツールでスタイルが正しく指定されているか、
確認してみてください。

投稿2017/05/31 05:29

namimon

総合スコア726

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

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

nomori7010

2017/05/31 05:36

>onsenUIではandroidとiOSでCSSの該当箇所が切り替わります。 そうなんですね。これは知りませんでした。ご回答ありがとうございました。
guest

0

ベストアンサー

通常のCSSであれば、以下で動くと思いますがOnsenUIでどう表示されるかは
環境が無いので試していません。

.button--large{ background-color:#3bc5ae; margin:auto; margin-bottom:10px; width:90%; }

投稿2017/05/31 05:11

kanimaru

総合スコア1013

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

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

nomori7010

2017/05/31 05:35

この1行を加えただけでうまくいきました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問