29000


標記の件で悩んでおりまして、CSSやHTMLの問題というよりは、モバイルの縦サイズがうまく取れていないのではないか、と考えています。

[code]

        #wrapper {
        display:table; /* 要素をテーブルのようにする */
        width:100%;
        max-width:600px;
        height:300px;
        margin:0 auto;
        background:#fff;
    }
    
    #center-image {
        display:table-cell; /* 要素をテーブルのようにする */
        text-align:center; /* インライン要素の中央揃え */
        vertical-align:middle; /* 天地中央に揃える */
    }
    
[/code]

CSSはウェブ上にあったものを利用してみたのですが、縦位置の中央表示については、明らかに対応できていない結果となりました。

なお、HTMLは以下のようになっています。

[code]

    <body>
    <div id="wrapper">
    <img id="center-image" src="images/title.png"/>
    </div>
    
[/code]

モバイル独自の対応が必要なのでしょうか。


CC BY-SA 3.0
2016-09-20T09:53:56.973
28999
2016-09-21T00:48:45.210
2016-09-20T14:13:22.923
18826
18826
question
css
monacaによる画面レイアウトでの画像の中央配置について


どういう風にセンタリングしたいのか？HTMLのソースが無いので推測ですが、  
`margin`をつける要素が違うのではないでしょうか？  
サンプル作成してみましたが、こういうことでしょうか？

[code]

    #wrapper {
        display:table; /* 要素をテーブルのようにする */
        width:100%;
        max-width:600px;
        height:300px;
        background:#00f;
    }
    
    #center-image {
        display:table-cell; /* 要素をテーブルのようにする */
        text-align:center; /* インライン要素の中央揃え */
        vertical-align:middle; /* 天地中央に揃える */
        margin:0 auto; /* wrapperから移動 */
    }
[/code]

[code]

    <div id="wrapper">
      <img id="center-image" src="https://dummyimage.com/200x100/000/fff" width="200px">
    </div>
[/code]

* * *

**追記**  
なるほど、縦にもセンタリングしたいのですね？  
では、質問文のコード基準で変更するとimgに直接ではなく  
テーブルセル用の`wrapper`をもう1つ作ってはどうでしょうか？

[code]

    #wrapper {
        display:table; /* 要素をテーブルのようにする */
        width:100%;
        max-width:600px;
        height:300px;
        background:#00f;
    }
    
    #inner_wrap{
        display:table-cell; /* 要素をテーブルのようにする */
        text-align:center; /* インライン要素の中央揃え */
        vertical-align:middle; /* 天地中央に揃える（セル内の位置をmiddleに） */
        margin:0 auto; /* wrapperから移動 */
    }
[/code]

[code]

    <div id="wrapper">
      <div id="inner_wrap">
        <img id="center-image" src="https://dummyimage.com/200x100/000/fff" width="200px">
      </div>
    </div>
[/code]


CC BY-SA 3.0
2016-09-20T10:19:51.780
29000
2016-09-21T00:48:45.210
2016-09-21T00:48:45.210
28999
answer


自己回答ですが、縦の中央寄せは、以下でできるようです。

[code]

    #wrapper {
        width: 100vw;
        height: 100vh;
        background: #ccc;
    }
    
    #center-image {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
    
[/code]

htmlは、以下の感じで。

[code]

    <body>
    <div id="wrapper">
      <img id="center-image" src="images/title.png">
    </div>
    </body>
    
[/code]

更なる改善案があれば、教えてください。

vwやvhというサイズ指定は、初めて知りました。


CC BY-SA 3.0
2016-09-20T14:10:53.060
29004
2016-09-20T14:10:53.060
18826
28999
answer