styled-component 가운데 정렬 관련

Question

로그인 화면을 구현중입니다.다음 그림과 같이 가로 방향으로 중앙에 정렬하기 위해서상위 App 컴포넌트에 display: flex; justify-content: center; 와 같이 적용했는데아래에 있는 이미지는 정중앙에 배치가 되지 않았습니다.현재 설정한 크기 (303px x 302px)을 유지하면서 중앙에 배치하는 방법을 알려주시면 감사하겠습니다.import React from 'react'; import logo from './logo.svg'; import './App.css'; import styled from 'styled-components'; import Login from './components/Login'; import "./App.css" const App = styled.div` width : 1440px; height : 1024px; background : #FFF; margin : 0 auto; display: flex; justify-content: center; ` function App() { return ( ); } export default App; import styled from "styled-components"; import Img from "../images/istockphoto-184276818-612x612.jpg" const LogoDiv = styled.img` margin-top : 229px; background-size : 100%; background-position: center; width : 303px; height : 302px; flex-shrink : 0; margin-bottom : 91px; display : flex; align-items :center; `; const Email = styled.input` display: flex; padding: 12px 16px; align-items: center; gap: 8px; align-self: stretch; border-radius: 12px; border: 1px solid var(--neutral-light-darkest, #C5C6CC); width : 327px; height : 48px; margin-bottom : 25px; box-sizing : border-box; ` const Password = styled.input` display: flex; padding: 12px 16px; align-items: center; gap: 8px; align-self: stretch; border-radius: 12px; border: 1px solid var(--neutral-light-darkest, #C5C6CC); width : 327px; height : 48px; margin-bottom : 34px; box-sizing : border-box; ` const LoginButton = styled.button` display: flex; width: 327px; height: 48px; padding: 12px 16px; justify-content: center; align-items: center; gap: 8px; flex-shrink: 0; border-radius: 12px; background: var(--jled, #B80000); color: var(--neutral-light-lightest, #FFF); font-size: 12px; font-family: Inter; font-style: normal; font-weight: 600; line-height: normal; margin-bottom : 13px; border : none; ` const SearchIdPassword = styled.h4` width : 73px; height : 17px; font-size: 14px; font-family: Inter; font-style: normal; font-weight: 800; line-height: normal; color: var(--neutral-dark-medium, #494A50); text-align: center; float : right; ` const Login = () => { return(

이메일

패스워드

로그인 ID/PW 찾기

); } export default Login;

빠른코딩 · Answer

App이 상위가 아닌데요?div가 감싸고 있잖아요?

styled-component 가운데 정렬 관련

1개의 답변

Q&A 목록