react :: 텍스트(text)와 컴포넌트(component) 정렬(align)하기 (네이버 지도 정렬하기)

리액트 프로젝트 내부의 .js (javascript) 파일에 텍스트를 입력하면

기본적으로 (당연하게도) 좌측 정렬로 보여진다.

 

만약 정렬을 바꾸고 싶다면

.css 파일에서 해당 텍스트가 속한 클래스의 텍스트 속성을 설정해주어야 한다.

<div className="TextBox">
    <h2>TORAMKO</h2>
    코딩하는 토람이
</div>

App.js 의 return 값에

위와 같이 'TextBox' 라는 클래스명으로 div 를 생성하여 그 안에 텍스트를 작성해두었다.

 

.TextBox {
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
}

그리고 App.css 에서 위와 같이 TextBox 의 속성을 지정해주었다.

text-align: center;

속성에 의해 텍스트가 가운데로 정렬된다.

 

 

 

텍스트 정렬은 요렇게 매우 간단하다.

 

 

그런데, div 안에 텍스트가 아닌 컴포넌트를 넣은 경우는 얘기가 달라진다.

나는 네이버 지도를 삽입하기 위해 NaverMap 컴포넌트를 넣어주었는데,

텍스트처럼 쉽게 정렬이 바뀌지가 않아서 아주 애를 먹었다.

 

<div className="ComponentBox">
    <NaverMap
        mapDivId={"map"}
        style={{ width: '40%', height: '40vh'}}
        defaultCenter={{ lat: 37.554722, lng: 126.970833 }}
        defaultZoom={13}
    />
</div>

 

위와 같이 NaverMap 을 정의해두었다.

 

.ComponentBox {
  align-items: center;
}

그리고 css 파일에서 align-items 를 활용하여 가운데 정렬을 시도해보았는데,

 

 

 

요렇게 왼쪽에 붙어서 움직이질 않는다.

align 이 들어간 속성이란 속성들은 죄다 써봤지만 실패ㅠ_ㅠ

 

 

 

 

폭풍 구글링의 결과...!

.ComponentBox {
  display: flex;
  justify-content: center;
  align-items: center;
}

이렇게 설정하면

 

 

 

짜잔! 가운데로 예쁘게 정렬된다.

리액트-네이버지도 조합은 리소스가 많지 않아 어렵던데

이 글이 작게나마 도움이 되길 바라며.. @.@