유저 프로필 이미지, 텍스트 가운데 정렬 기법

<img src="https://pds.joongang.co.kr/news/component/htmlphoto_mmdata/202401/17/f1984fc9-dd96-4ccf-93e4-7b5064d1bebf.jpg" class=
"profile-pic">

<p class="user-name">장원영</p>

.profile-pic {
  /*  div 동그랗게  */
  width: 300px;
  height: 300px;
  border-radius: 70%;
  
  /* 요소 가운데로 */
  display: block;
  margin: 0 auto;
}

.user-name {
  font-size: 40px;
  letter-spacing: 20px; 
  text-align: center;
}

 

img같이 block 속성을 지니고 있지 않은 요소를 가운데 정렬할 때는 display: block으로 바꾸어 주고, margin: 0 auto를 준다.

 

자동으로 block요소를 갖고 있는 태그들은 div, p, h 등이 있다. 이 태그들은 block을 주지 않고 margin: 0 auto 만 주어도 가운데 정렬 된다.

 

텍스트는 더 간단하게 text-aglign: center 속성으로 가운데 정렬 할 수 있다.

 

추가 꿀팁

• letter-spacing은 자간으로 적절히 조절하면 CSS가 예뻐진다.
• 정사각형의 div나 이미지에서 radius를 70%까지 깎으면 동그랗게 바뀐다.