0

標記の件で悩んでおりまして、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>

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

2 件の回答 2

0

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

#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から移動 */
}
<div id="wrapper">
  <img id="center-image" src="https://dummyimage.com/200x100/000/fff" width="200px">
</div>


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

#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から移動 */
}
<div id="wrapper">
  <div id="inner_wrap">
    <img id="center-image" src="https://dummyimage.com/200x100/000/fff" width="200px">
  </div>
</div>

2
  • ありがとうございます。いただいたHTMLとCSSを実行すると、横位置はセンタリングされるのですが、縦位置については、画像が上に張り付いて表示されてしまうようです。 モバイルでの縦の画面サイズは、端末によって、まちまちだとは思うのですが、この縦座標の中央に画像が配置されるようにしたいと思っています。
    – T.S
    Commented 2016年9月20日 11:39
  • なるほど、追記しました。親要素のサイズなどはvh/vwなどのビューポート定義のサイズで変更しても大丈夫かと思います。
    – user10259
    Commented 2016年9月21日 0:43
0

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

#wrapper {
    width: 100vw;
    height: 100vh;
    background: #ccc;
}

#center-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

htmlは、以下の感じで。

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

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。