-
더보기 버튼의 가운데 정렬을 위한 css 질문입니다.
제가 알고 있는 바로는
1. margin : 0 auto;
2. display: flex;
justify-content: center;
align-items: center;
이렇게 둘 중에서 하나만 하면 가운데 정렬이 되야 하는데
이 경우에는 저 2개를 모두 작성해줘야 가운데 정렬이 되더라구요.
1번만 했을땐 아래처럼 오른쪽 정렬이 되고,
2번만 했을땐 왼쪽 정렬이 됩니다.
혹시 몰라 관련 코드들도 첨부합니다.
App.js
<Route exact path="/">
<div className="background">
<h1>20% Season Off</h1>
<div>
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</div>
<button className="learn_button">Learn more</button>
</div><div className="container">
<div className="row">
{/* map을 쓸때, jsx안에서 js문법을 쓸때 중괄호좀 써라 */}
{shoes.map((shoe, i) => (
<Card key={i} shoes={shoes[i]} i={i} />
))}
</div>
<button>더보기</button>
</div><button
onClick={() => {
let list = shoes.sort((a, b) => a.price - b.price);
setShoes([...list]);
<div>{console.log(shoes)}</div>;
// state의 값을 다시 재정비해줘야함. 그 역할 setShoes
// 유레카 이걸 안해서 바로바로 버튼을 눌러도 적용이 안됐었음
}}
>
가격순 정렬하기!!
</button>
</Route>(App.css)
.container {
width: 800px;
}.row {
display: flex;
justify-content: center;
align-items: center;
}.container button {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}display : flex; justify-content : center는 버튼의 부모박스에 주어야합니다 그럼 내부 요소를 가로정렬할 수 있습니다
-> 더보기라는 버튼은 신발들과 같은 라인에 둘것이 아니여서요.
display: block을 하니 가운데 정렬히 똑바로 됐습니다.
헌데 display: block 말고 width: 100%를 줌과 같이 파란색부분을 다 차지 할 수 있게 해도 되는 상황이 나왔었는데 왜 여기서는 그런게 안되나요? 그리고 justify-content를 이용해서는 가운데로 옮길수 없는건가요?
- 답변은 로그인 후 가능합니다.