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="main.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> <title>Document</title> </head>
<body> <div class="container "> <form action="" id="write_number"> <input type="text" id="369games"> <button type="submit">전송</button> </form>
<span class="badge bg-dark">Dark 🔄</span>
<p>태조 이성계가 태어난 년도는?</p> <input type="text" id="answer"> <button id="send-answer">제출</button>
<p>당신의 연 이자율은?</p> <input type="text" id="answer_money"> <input type="number" id="answer_year" min="1" max="30" step="1" placeholder="숫자를 선택하세요."> <input type="button" id="submit_answer" value="계산">
<div class="main-bg"> <h4>shirts on sale</h4> <button id="login" class="btn btn-danger">로그인</button> <div class="alert alert-danger timer_alert"><span class="count_timer">5</span>초 이내 구매시 사은품 증정!</div> </div> <div class="test1"> <div class="slide_container"> <div class="slide_box"> < img src="https://codingapple.com/wp-content/uploads/2022/02/car1.png" alt=""> </div> <div class="slide_box"> < img src="https://codingapple.com/wp-content/uploads/2022/02/car2.png" alt=""> </div> <div class="slide_box"> < img src="https://codingapple.com/wp-content/uploads/2022/02/car3.png" alt=""> </div> </div> </div> <button class="slide_1">1</button> <button class="slide_2">2</button> <button class="slide_3">3</button> <button class="next">다음</button> <div style="overflow: hidden;"> <div class="test_box"> <div class="white_box"></div> </div> </div> </div>
<script src="main.js"></script>
</body>
</html>
.bg_white { color: black; font-size: 220px; }.test1 { overflow: hidden; }.slide_container { width: 300vw; display: flex; transition: all 1s; }.slide_box { width: 100vw; }.slide_box img { width: 50%; }.test_box { width: 100vw; background-color: black; height: 20vh; display: flex; justify-content: center; align-items: center; } .white_box { background-color: white; width: 300px; height: 300px; }이렇게 test_box를 가운데로 정렬을 못하고있습니다.. 혹시 부트스트랩에있는 컨테이너를 사용해서 가운데 정렬이 안되는건가요?? 도저히 못찾겠네요 ㅠㅠ
가운데 정렬이 저런식으로 밖에 안됩니다 ㅠㅠ
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.