2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/css/landing.css"> <link rel="stylesheet" href="/fontawesome/css/all.min.css"> <title>Document</title> </head>
<body>
<div class="main-bg"> <div class="main-left"> <div> <h1>Landing Page for Apps</h1> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Voluptatum, rem, distinctio! Dolores doloremque.</p> </div> <button type="button" class="main-bt">Show more</button> </div> < img src="img/iphone.png" class="main-img"> </div> </div>
</body>
</html> CSS
body { box-sizing: border-box; margin: 0; }.main-bg { position: relative; width: 100%; min-width: 200px; height: 450px; padding: 1px; background: linear-gradient(to bottom, rgb(122, 140, 223), rgb(39, 64, 177)); }.main-left { padding: 60px; color: white; }.main-bt { width: 100px; height: 40px; border-radius: 5px; border: 0; background-color: rgb(63, 62, 62); color: white; }.main-bt:hover { background-color: gray; }.main-img { position: absolute; width: 300px; right: 50px; bottom: 0; }@media screen and (max-width: 767px) { .main-bg { text-align: center; } .main-left { font-size: 15px; padding: 30px; } .main-img { width: 200px; position: absolute; left: 50%; margin-left: -100px; } }
모바일환경의 크기에서 이미지의 크기에 따라 중앙정렬이 다르더라고요
캡쳐이미지는 100px인데 이 경우에는 중앙정렬이 맞지않는데
200px로 변경할경우에는 중앙정렬이 되더라구요
왜 이런지 알 수 있을까요
또한 포지션을 사용하지 않고 오른쪽아래에 정렬할 수 있는 방법이 있을까요 pc환경에서
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.