CSS 이미지 뒤의 텍스트를 중앙에 맞출 수 없으면 어떻게 해야 합니까?

CSS 이미지 뒤의 텍스트가 중앙에 위치할 수 없는 문제에 대한 해결책: 먼저 HTML 샘플 파일을 만든 다음 이미지와 텍스트를 배치하고 마지막으로 이미지와 텍스트에 각각 "vertical-align: middle" 스타일을 추가합니다. .

이 튜토리얼의 운영 환경: windows7 시스템, css3 버전, thinkpad t480 컴퓨터.

추천: "css 비디오 튜토리얼"

CSS 그림 뒤의 텍스트는 중앙에 위치할 수 없나요?

예를 들어, 이제 아이콘과 "라는 단어로만 구성된 간단한 삭제 버튼을 만들고 싶습니다. 삭제"를 선택하면 배치 방법에 대해 생각할 시간이 30초 주어집니다.

좋아요, 먼저 다음과 같이 HTML 코드를 보여주세요:

<div class="del"><span class="icon"></span><span>删除</span></div>

매우 간단합니다. del 클래스가 있는 div 요소 아래에 두 개의 스팬 태그가 있습니다. 물론 아이콘을 의사 요소로 직접 바꿀 수도 있습니다. 의사 요소의 벽면에 대해서는 아직 모릅니다.) 과거를 생각해 보십시오...).

다음으로 CSS를 다음과 같이 작성할 수 있습니다:

.del {
font-size: 18px;
}
.del .icon {
display: inline-block;
width: 16px;
height: 24px;
margin-right: 5px;
background: url("imgs/delete.png") no-repeat center;
background-size: 100%;
}

그러면 다음과 같습니다:

咦? 제가 상상했던 것과는 다른 것 같아요! 그림과 텍스트를 수직으로 정렬할 수 없는 이유는 무엇입니까? 이유는?

그림과 텍스트는 기본적으로 기준선을 기준으로 선 내에서 세로로 정렬되기 때문입니다. 그림의 기준선은 그림의 하단에 있지만 텍스트의 기준선은 텍스트의 중간점 아래에 있습니다. 그래서 위와 같이 표시됩니다. 그렇다면 이 문제를 해결하는 방법은 무엇입니까?

매우 간단합니다. 그림과 텍스트에 각각 수직 정렬: 중간을 추가하면 됩니다.

.del .icon {
display: inline-block;
width: 18px;
height: 24px;
margin-right: 5px;
vertical-align: middle;
background: url("imgs/delete.png") no-repeat center;
background-size: 100%;
}
.del span {
vertical-align: middle;
}

이 경우 그림과 텍스트는 중심선에 정렬됩니다.

지침:

vertical -align 속성은 요소의 수직 정렬을 설정합니다.

vertical-align 속성은 요소가 위치한 줄의 기준선을 기준으로 인라인 요소 기준선의 수직 정렬을 정의합니다. 음수 길이 값과 백분율 값을 지정할 수 있습니다. 이렇게 하면 요소가 높아지는 대신 요소가 낮아집니다. 테이블 셀에서 이 속성은 셀 상자의 셀 내용 정렬을 설정합니다.

vertical-align:middle을 사용하여 요소를 상위 요소의 중앙에 배치하세요.

위 내용은 CSS 이미지 뒤의 텍스트를 중앙에 맞출 수 없으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!