• 목록

[code]<div class="audio_pagination">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>[/code]
CSS (가로 정렬 유지 + 자동 줄바꿈)[code].audio_pagination {
    margin: 10px 0px;
    padding: 0;
    width: 100%;
    text-align: center;
    line-height: 45px;
    display: block; /* 부모 요소는 블록 요소로 유지 */
}

.audio_pagination ul {
    display: flex; /* 가로 정렬 유지 */
    flex-wrap: wrap; /* 초과 시 자동 줄바꿈 */
    justify-content: center; /* 중앙 정렬 */
    padding: 0;
    margin: 0;
}

.audio_pagination li {
    display: inline-block; /* 가로 정렬 유지 */
    width: 53px;
    height: 40px;
    line-height: 38px;
    padding: 0;
    margin: 2px; /* 요소 간 간격 */
    border-radius: 7px;
    background-color: #a4a4ff;
}[/code]✅ 설명
1. .audio_pagination은 display: block; 유지 (부모 요소는 블록 요소여야 함).
2. .audio_pagination ul에 display: flex; flex-wrap: wrap; justify-content: center; 적용 →
    가로 정렬을 유지하면서 초과하면 자동 줄바꿈 되도록 설정.
3. .audio_pagination li는 display: inline-block;으로 설정하여 가로 정렬 유지.
4. margin: 2px;을 사용하여 요소 간의 적당한 간격 추가.

📌 가로 정렬이 유지되면서도 자동 줄바꿈이 가능합니다!
이제 창 크기를 줄이면 li 요소들이 자동으로 다음 줄로 내려가면서 가로 정렬 유지됩니다.