<script type="text/javascript"> var windowWidth = window.innerWidth; var windowheight = window.innerHeight; //980px以下で発火するようになってますので適宜調整して下さい if (windowWidth <= 980) { $("body").css('height', windowheight); } </script> ``````ここに言語を入力 ```ここに言語を入力 <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>あああ</title> <link href="css/reset.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div class="top"> <a href=""><img src="img/aaa.png" width="243" height="58" alt=""/> </a> </div> <div class="bottom"> <a href=""><img src="img/aaa.png" width="243" height="58" alt=""/> </a> </div> <div id="aaa"> <a href="index.html"><img src="img/aaa.png" width="467" height="467" alt=""/> </a> </div> </div> </body> </html> <style> @charset "UTF-8"; .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } body{ width: 100%; color: black; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 13px; line-height: 1.5; background: linear-gradient(to bottom,black 0%,black 50%,white 50%,white 100%); height: 100vh; } .top a img { position: absolute; top: 0; left: 0; right: 0; bottom: 50%; margin: auto; width: 30%; max-width: 150px; height: auto; } .bottom a img { position: absolute; top: 50%; left: 0; right: 0; bottom: 0; margin: auto; width: 30%; max-width: 150px; height: auto; } #aaa a img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 30%; max-width: 150px; height: auto; } </style>
aaaの画像を上下左右ど真ん中に配置し、そのaaa画像の上下に.topイメージと.bottomイメージの要素を50%の位置で配置したくてこのコードを書きました。
参考にしたサイトはこちらです。http://bashalog.c-brains.jp/14/08/06-100100.php
パソコンで見た時にはサファリ、クローム、Firefoxと全てのブラウザできちんと表示ができているんですが、iphoneで確認した所、左右は中心をとっていましたが、上下で中心がとれず、少し上の位置になってしまっています。どうしてスマホで見ると位置が変わってしまうのかご享受下さい。宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/04 04:35