[CSS] ul ol 글자만 왼쪽 정렬하기

문제 상황

ol을 사용해서 만든 리스트를 가운데에 정렬을 시키려고 하다보니, 아래 캡쳐화면처럼 들쑥날쑥하게 정렬되었다.

숫자는 고정시키고 전체를 가운데에 놓고 싶었다.

 

 

해결 방법

flex box를 사용하면 된다. (간단)

li에 text-align을 left로 설정해주면 글씨를 왼쪽으로 정렬시킬 수 있고,

ol을 가운데에 놓아주면 된다.

let Ordered = styled.ol`
  display: flex;
  flex-direction: column;
`;
let Pops = styled.li`
  text-align: left;
`;

끝!