인라인 블록을 같은 줄에 수평으로 정렬

문제

인라인 블록은 기준선 정렬 및 자동 센터링과 같은 부동 요소에 비해 이점을 제공합니다. 뷰포트가 좁아지면. 그러나 두 개의 인라인 블록을 같은 줄에 수평으로 정렬하는 것은 어려울 수 있습니다.

인라인 블록 정렬의 과제

• 부동 소수점은 기준선 정렬을 방해하고 원치 않는 순환을 일으킬 수 있습니다. .
• 상대 및 절대 위치 지정으로 인해 부동 소수점과 유사한 간격 문제가 발생할 수 있습니다.

해결책: 텍스트 자리맞추기 사용

효과적인 해결 방법 중 하나는 텍스트 정렬을 활용하는 것입니다. : 정당화 기술:

CSS 코드

.header {
    text-align: justify;
    background: #ccc;
}

.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

.nav {
    display: inline-block;
    vertical-align: baseline;
}

설명

• 부모 요소의 텍스트 정렬을 "양쪽 정렬"로 설정하여 텍스트를 폭 전체에 균등하게 분배합니다.
• 의사 요소 헤더를 추가합니다. 인라인 블록 사이의 나머지 공간을 소비합니다.
• 인라인 블록 h1 및 .nav를 표시하도록 설정합니다. inline-block 및 수직 정렬: 기준선은 기준선을 유지합니다.