입력 텍스트의 수직 중앙 정렬 및 버튼 정렬 문제에 대한 예제 튜토리얼 공유

1. 상자 모델 문제: CSS를 재설정하세요

2. 버튼이 정렬되지 않았습니다. 또는 수직 정렬: 가운데를 지정하세요. 너비와 높이를 계산하여 정렬하세요. 3.IE8 텍스트가 가운데 정렬되지 않음: line-height 속성 참고:

IE8은 글꼴 쓰기를 지원하지 않습니다(또는 특정 스타일은 지원하지 않습니다).

IE 브라우저는 IE8에서 테스트되었으므로 IE5를 사용하십시오. , 6, 7은 주의해서 살펴보세요. 문제 원인: 상자 모델

1. 상자 모델:

페이지에 2개의 입력, 텍스트 상자 및 버튼 버튼을 배치합니다(너비 및 높이 설정, 다른 스타일 없음) input[type= ' text']{width:400px;height:45px;}

input[type='button']{width:45px;height:45px;}

관찰: IE8: 텍스트 상자 테두리:1px;padding:2px;

                                                                                                                                                                                  버튼 테두리: 3px 0px;

px;padding:1px 6px;

테두리와 패딩을 동일하게 만드는 스타일을 추가하세요

input[type='text']{width: 400px;height:45px;border:1px 단색 빨간색 ;padding:0;}

input[type='button']{width:45px;height:45px;border:1px 단색 빨간색;padding:0;}

관찰 :

IE8: 텍스트 상자 테두리:1px; content:202x47(IE의 상자 모델) 버튼 테두리:1px;content:45x45(IE의 상자 모델)

Firefox: 텍스트 상자 테두리:1px;content:200x45

버튼 border:1px;content:43x43

Google: 텍스트 상자 테두리: 1px; 내용: 200x45

버튼 테두리: 1px; 내용: 43x43

2. 버튼 정렬 방법: Floating

(오프셋이 다르기 때문입니다.) 이 부분은 직접 검색해 보지 않았습니다. Knowledge)

input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;float :left;}

input[type='button']{width:45px ;height:45px;border:1px solid red;padding:0;float:left;}

2단계를 참조하세요.

너비와 높이를 계산하세요 직접 정렬하세요

(일부 테두리가 없을 수도 있습니다. 대신 배경색을 사용하세요. 테두리:0을 설정하세요. 높이는 직접 조정할 수 있습니다.)

input[type='text']{width:400px;height:45px ;border:1px 단색 빨간색;padding:0;float:left;}input[type='button ']{width:47px;height:47px;border:1px 단색 빨간색;padding:0;float:left;}

3. IE8 텍스트 중심: 줄 높이 참고 IE8은 글꼴 쓰기를 지원하지 않습니다

글꼴 변경: 일반 18px "Microsoft Yahei"; 글꼴 크기: 18px; 글꼴 스타일: 일반; 글꼴 패밀리:" 마이크로소프트 야헤이!" 또는 (font:normal 18px "Microsoft Yahei"; 쓰기 방법을 사용할 수 있지만 중간에 있지는 않습니다)
input[type='text']{width:400px;height:25px;padding:10px 0px; 테두리 :1px 단색 빨간색;float:왼쪽;}
input[type='button']{width:47px;height:47px;line-height: 47px;border:1px solid red;padding:0;float:left;}

위 내용은 입력 텍스트의 수직 중앙 정렬 및 버튼 정렬 문제에 대한 예제 튜토리얼 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!