float: left 속성 요소 가운데 정렬하기

 

 

헤더에 네비게이션 메뉴를 만드는 도중 <ul>전체를 헤더 가운데에 고정하고 싶었지만 <li>요소에 float: left 속성이 적용되어 있어 <ul> 또한 왼쪽에 고정되어 있는 상황

 

 

 

 

해결방법

 

1. float: left 속성을 display: inline-block으로 대체

 

2. <li>사이 간격은 margin: -2.9px로 해결          

 

3. 헤더 text-align: center 적용으로 가운데 정렬   

 

 

 

 

[HTML/CSS] CSS만 활용한 사이드 메뉴

CSS만 활용한 사이드 메뉴 See the Pen MWeeOKp by junheeleeme (@junheeleeme) on CodePen. checkbox와 태그를 활용한 사이드 메뉴 사용자와 개발자의 체크박스 사용 용도가 달라도 너무 다르다.

juni-official.tistory.com

 

 

[CSS] 요소 화면 중앙에 배치하는 방법

CSS 화면 중앙에 요소 배치 방법 HTML요소를 CSS속성으로 화면 중앙에 배치하는 방법을 알아보도록 하겠습니다. 1. position과 transform 사용 .box { position:absolute; top:50%; left:50%; transform: transla..

juni-official.tistory.com