monacaによる画面レイアウトでの画像の中央配置について

投稿者: Anonymous

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

    #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; /* 天地中央に揃える */
}

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

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

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

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

解決

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

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_


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

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

回答者: user10259

Leave a Reply

Your email address will not be published. Required fields are marked *