CSS 중앙정렬
-
position,transform 사용
position:absolute는 부모 요소의 위치를 기준으로 절대적인 위치 값을 설정할 수 있게하는 속성이다. left, top을 50%로 설정해 요소의 좌측 상단 기준으로 요소가 중앙에 정렬되고 요소가 정확하게 정중앙에 있어야 하므로transform: translate(-50%,-50%)를 사용해 해당 요소의 너비와 높이의 절반만큼을 빼서 이동하게 되면 요소가 중앙에 위치하게 된다. -
text-align 사용
block요소에
text-align:center속성을 지정해 content나 inline 요소들을 가운데 정렬이 가능하다. -
margin:auto 사용
주로 메인 콘텐츠 컨테이너를 수평 중앙에 둘 때 사용한다. 좌우 여백 최대폭을 기준으로 반반씩 정확하게 가져가게 해 가운데 정렬이 되는 원리이다. display가 inline이거나 inline-block이면 제대로 작동을 하지 않는다.
-
주어진 코드로 정렬
<!DOCYPE html> <html> <head> <title>텍스트 정렬</title> <style> .text_center{ text-align: center; } .text_left{ text-align: left; } .text_right{ text-align: right; } .one { transform: translateX(50%); } </style> </head> <body> <div class="text_center"> <p>hello</p> </div> <div class="text_center"> <img width="100px" src="https://www.tvn-2.com/nacionales/Imagen-ilustrativa-gato-medio-bosque_18585331.jpg" alt=""> </div> <div class="text_left"> hello <span>왼쪽 정렬</span> </div> <div class ="text_right"> hello <span>오른쪽 정렬</span> </div> <div class="text_center"> <span>가운데 정렬</span> </div> </body> </html>1번의 방법을 활용해 가운데 정렬이 가능하다.
.one { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }좌우 정렬만 하는 경우 다음과 같은 코드로 정렬 가능하다.
.one { position: absolute; right:50%; transform: translateX(50%); }
안녕하세요