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
「中央」とは、左右?上下?両方?
回答3件
あなたの回答
tips
プレビュー