수다닷컴

모바일 사이트 li 아이콘 가운데 정렬 도와주세요

튼트나 2025.06.07 댓글 7

모바일 사이트를 만들고 있는데요.
창 크기와 상관없이 아이콘을 가운데 정렬하고 싶어요.
작은 화면에서는 두 개씩, 큰 화면에서는 네 개가 보이게 하려면 CSS를 어떻게 고치면 될까요?
현재 코드는 다음과 같아요.

.list{clear:both; overflow:hidden; padding:40px 39px 0 39px;}
.list li{float:left; margin:12px;}
.list li a{display:block; width:97px; height:13px; text-align:center; padding-top:100px; padding-bottom:52px;}
.list .list01{background:url(../img/icon1.jpg) no-repeat 0 0;}
.list .list02{background:url(../img/icon2.jpg) no-repeat 0 0;}
.list .list03{background:url(../img/icon3.jpg) no-repeat 0 0;}
.list .list04{background:url(../img/icon4.jpg) no-repeat 0 0;}
도움 부탁드려요.

댓글 7

  • 콘라드 2025.06.07

    시간이 꽤 지나서 해결하셨을 수도 있지만 저도 연습 삼아 해봤어요.
    ul에 text-align:center를 주고 li를 inline으로 바꿔보세요.

  • 빵야 2025.06.07

    말씀해주신 대로 해봤는데 가로 가운데 정렬이 안 되고 아이콘이 아래로 내려가요.

  • 꽃햇님 2025.06.07

    제가 잘못 적용한 건지 알려주신 방법으로 해도 안 되네요 ㅎㅎ

  • 찬바리 2025.06.07

    ul에 margin:0 auto를 주고 li는 float:left로 해보세요.

  • 각티슈 2025.06.07

    list 클래스에 text-align:center를 넣어보세요.

  • 송아리 2025.06.07

    div에 text-align:center를 주고 링크에 display:inline-block을 적용해보세요.

  • 크리미걸 2025.06.07

    화면 크기에 따라 스크립트로 ul 크기를 바꾸면 아이콘이 아래로 내려갈 것 같아요.