20033


すみません。質問させてください。

MonacaでjQueryを利用してページを作成しているのですが、1点詰まったことがあります。

画面の縦横の真ん中に文字を表示させように、

htmlで

[code]

    <div id="startFl" data-role="page" height="100%">
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
        <tr height="100%"> 
            <td class="mainscreen"><p id="call_text_Fl"></p></td> 
        </tr> 
    </table> 
    
[/code]

CSSで

[code]

    html {
        height: 100%;
    }
    body {
      height: 100%;
    }
    td.mainscreen{
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
    }
    
[/code]

として、見たのですが、横では中央に表示されたのですが、縦では真ん中になっていませんでした。  
これは何が良くないのでしょうか。

お知恵をお貸しください。


CC BY-SA 3.0
2015-12-15T13:10:35.100
20029
2015-12-15T14:03:13.437
2015-12-15T13:20:17.867
8000
9621
question
monaca css
Jqueryを使ったMonacaで画面のどまんなかに文字を表示させる方法について


`<div>` タグに `height` という属性は存在しないため、CSSで指定する必要があります。

加えて、`<td>` や `<tr>` の幅・高さは自動調整されるため、`100%` を指定する必要はありません。

[code]

    html, body, #startFl {
      width: 100%;
      height: 100%;
    }
    .mainscreen {
      text-align: center;
      vertical-align: middle;
    }
[/code]

[code]

    <div id="startFl" data-role="page">
      <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="mainscreen"><p id="call_text_Fl">hoge</p></td>
        </tr>
      </table>
    </div>
[/code]

テーブルのレイアウトを再現する `display: table` 等を使えば、`<table>` タグも不要になります。

[code]

    html, body, #startFl {
      width: 100%;
      height: 100%;
    }
    #startFl {
      display: table;
    }
    .mainscreen {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
[/code]

[code]

    <div id="startFl" data-role="page">
      <div class="mainscreen"><p id="call_text_Fl">hoge</p></div>
    </div>
[/code]

`.mainscreen`
の高さが決まっている場合など、条件によっては他の方法が使えることもありますが、テーブルに頼るのが簡単ではあります。詳しくは「css
上下中央」等で検索してみてください。


CC BY-SA 3.0
2015-12-15T14:03:13.437
20033
2015-12-15T14:03:13.437
8000
20029
answer