CSS로 텍스트 아이콘 정렬을 달성하는 방법

개발 중에 한 줄에 표시되는 그림과 텍스트를 접하는 것이 가장 일반적입니다. 두 개의 인라인 요소를 정렬하는 것이 일반적으로 가장 일반적으로 사용되는 정렬 방법을 사용하지만 여전히 뭔가 잘못된 것입니다. . 편차, 가장 기본적인 예를 먼저 살펴보겠습니다.

html 부분:

<div class="wrap">
    <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt="">
    xx测试对齐Style-
</div>

추천 튜토리얼: CSS 입문 튜토리얼

css 부분:

.wrap {
      width: 300px;
      text-align: center;
      margin: 20px auto;
      font-size: 14px;
 }
 .wrap img {
      width: 20px;
 }

정렬을 사용하지 않을 때의 효과는 다음과 같습니다.

기본 정렬은 x 문자의 맨 아래 줄인 기준선입니다.

이것은 또한 첫 번째 질문에 대한 답변입니다. 브라우저의 이미지와 텍스트가 추가로 설정되지 않은 경우 수직 정렬:기준선;인 소문자 x의 아래쪽 가장자리를 기준으로 합니다.

몇 가지 일반적인 센터링 솔루션

1. 수직 정렬 중앙 정렬 사용

.wrap {
    vertical-align: middle;
    }
.wrap img {
    vertical-align: middle;
}

일반적으로 사용되는 수직 정렬을 사용하여 텍스트와 이미지를 정렬할 때 아래와 같이 실제로 특정 편차가 있습니다.

중간

vertical-align 값은 실제로 소문자 x 높이의 절반에 상대적이므로 이미지가 의 중간에 정렬되기 시작하고 그림이 상대적으로 낮아집니다.

2. 수직 정렬을 사용하고 텍스트를 범위로 묶습니다.

약간 변경하여 텍스트 부분을 범위 태그로 묶고 범위에 대해 수직 정렬: 중간; 이때 사진이 약간 위로 이동하는 것을 볼 수 있습니다.

효과는 다음과 같습니다.

3. 플렉스 레이아웃 사용

display: flex;
align-items: center;

그러나 플렉스 레이아웃을 사용하더라도 때로는 약간의 편차가 있을 수 있습니다. 예를 들어 사진 크기는 짝수입니다. 글꼴 크기는 짝수이고, line-height가 짝수이면 정렬되고, 홀수이면 1px 더 높아집니다.

4. ex 단위 사용

ex는 소문자 x의 높이로, 글꼴 및 글꼴 크기의 영향을 받지 않는 인라인 요소의 세로 가운데 정렬 효과에 사용할 수 있습니다.

PS: 그러나 이는 아이콘 높이가 텍스트와 동일한 경우 매우 실용적입니다. 예를 들어 문자 뒤에 화살표가 추가된 경우입니다(확대하려면 클릭).

.wrap img {
    height: 1ex;
}

5. 수직 정렬 수치 방식 사용

수직 정렬 속성 값은 수치 유형과 백분율 값을 사용할 수 있습니다. 예를 들어 위의 경우는 여전히 기본 사례입니다. 이미지 높이가 20픽셀이고 텍스트 글꼴 크기인 경우입니다. 22px이며, 기본 정렬은 텍스트의 기준선이므로 이미지는 2px 더 높아집니다. 이때 정렬 효과를 얻으려면 이미지를 2px 아래로 오프셋하면 되며, 수직 정렬 속성의 숫자 값도 필요합니다. 호환성이 좋습니다.

.wrap {
            width: 100%;
            padding-top: 200px;
            text-align: center;
            margin: 20px auto;
            font-size: 22px;
            height: 40px;
            
        }
        .wrap img {
            width: 20px;
            vertical-align: -2px;
        }

추천 관련 비디오 튜토리얼: css 비디오 튜토리얼

위 내용은 CSS로 텍스트 아이콘 정렬을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!