質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

191閲覧

modal画面を中央に配置したい。

morin

総合スコア57

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/27 10:50

編集2019/08/27 11:51

modalクラスを中央に配置するにはどうしたらよいでしょうか??

※ 中央とは左右のことです。

html

1<!DOCTYPE html> 2<html> 3<head> 4 <title>Practice Modal</title> 5 <meta charset="UTF-8"> 6 <link rel="stylesheet" href="stylesheet.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 8</head> 9<body> 10 <div class="top-wrapper"> 11 <div class="container"> 12 <div class="btn-wrapper"> 13 <a href="#" class="signup btn">新規登録</a> 14 <a href="#" class="login btn">ログイン</a> 15 </div> 16 </div> 17 </div> 18 <div class="login-modal-wrapper"> 19 <div class="modal"> 20 <h3>Emailでログインします</h3> 21 <input class="contact-form" type="text" placeholder="メールアドレス"> 22 <input class="contact-form" type="password" placeholder="パスワード"> 23 <div></div> 24 <div class="modal-login">ログイン</div> 25 </div> 26 </div> 27</body> 28</html> 29

css

1body { 2 margin: 0; 3} 4 5a { 6 text-decoration: none; 7} 8 9.container { 10 padding: 0 14px; 11 margin: 0 auto; 12} 13.top-wrapper { 14 text-align:center; 15 height: auto; 16} 17 18.top-wrapper h1 { 19 margin: 50px 0 ; 20} 21.btn { 22 background-color: #3399FF; 23 color: white; 24 padding: 14px 24px; 25 display: inline-block; 26} 27 28/* モーダルのCSS */ 29.login-modal-wrapper { 30 position: fixed; 31 top: 0; 32 right: 0; 33 bottom: 0; 34 left: 0; 35 background-color: rgba(0, 0, 0, 0.6); 36 z-index: 100; 37 38} 39 40.modal { 41 position: absolute; 42 top: 25%; 43 left: 43%; 44 height: auto; 45 background-color: #CCFFFF; 46 width: 400px; 47 text-align: center; 48} 49 50.modal-login { 51 background-color: #009900; 52 color: white; 53 display: inline-block; 54 padding: 14px 23px; 55 margin: 14px 0; 56} 57

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2019/08/27 11:05

「中央」とは、左右?上下?両方?
guest

回答3

0

ベストアンサー

absoluteでやるならこういう方法もありますよー。

CSS

1.modal { 2 position: absolute; 3 top: 25%; 4 left: 50%; /*変更*/ 5 transform: translateX(-50%); /*追加*/ 6 height: auto; 7 background-color: #CCFFFF; 8 width: 400px; 9 text-align: center; 10}

投稿2019/08/28 02:47

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

morin

2019/09/03 06:10

回答ありがとうございます!
guest

0

「position: absolute;」による中央寄せは以下の方法もあります。

CSS

1.modal { 2 position: absolute; 3 top: 25%; 4 /* left: 43%; ← 削除*/ 5 left: 0; /* ← 追加 */ 6 right: 0; /* ← 追加 */ 7 margin: auto; /* ← 追加 */ 8 height: auto; 9 background-color: #CCFFFF; 10 width: 400px; 11 text-align: center; 12}

投稿2019/08/27 21:53

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

CSS

1.modal { 2 position: absolute; 3 top: 25%; 4 left: calc(50vw - 200px);//ここだけ変えました 5 height: auto; 6 background-color: #CCFFFF; 7 width: 400px; 8 text-align: center; 9}

こんなとこか?
viewport読み込んでください。
試してないんで動くかわかりません。

気になった点を1つ。たまに気にしない方がいますが**metaのcharsetよりも後にtitleタグを置かなければいけません。**ご注意ください。

投稿2019/08/27 12:46

編集2019/08/27 12:55
kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

morin

2019/08/27 12:48

回答ありがとうございます! 50vw - 200pxはどう導かれた数字ですか??
kyoya0819

2019/08/27 12:51

absoluteは絶対位置といいページの左上から要素の左上までの距離をtopとleft(bottom,right)に指定します。 この時の要素の横幅が400pxでページ幅が100vwです。 この際の両方の余白の合計は100vw-400pxとなります。 両方同じ余白にするなら半分の50vw-200pxになるわけです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問