입력 텍스트의 수직 중앙 정렬 및 버튼 정렬 문제에 대한 예제 튜토리얼 공유
- 零下一度원래의
- 2017-06-24 11:31:183054검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!