CSS의 하단을 일치시키는 방법은 무엇입니까? CSS 세 가지 센터링 방법
- 云罗郡主앞으로
- 2018-10-22 14:37:398702검색
이 글의 내용은 CSS 하단을 맞추는 방법에 관한 것입니다. CSS의 세 가지 센터링 방법에는 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
어느 날 팀장님이 테이블 스타일을 바꿔서 바텀 라운드로 해달라고 하더라구요. 당시에는 매우 간단하다고 생각해서 작성을 시작했지만, (브라우저 스케일링을 고려하면) 아무리 해도 효과를 얻을 수 없다는 것을 알게 되었습니다. 몇 가지 생각과 토론 끝에 저는 하위 게임을 위한 세 가지 방법을 생각해 냈습니다.
1. 양식의 상위 요소를 설정합니다. {width: 60%; margin: 0 auto;}
코드는 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*
{
padding: 0;
margin: 0;
}
.main{
width: 60%;
margin:0 auto;
}
form{
position:fixed;
bottom: 0;
width: 60%;
display: block;
}
textarea
{
width: 80%;
}
input{
width: 12%;
height: 10%;
position: relative;
bottom:24px;
}
</style>
<body>
<div >
<form id="wiselyForm" >
<textarea rows="4" cols="60" name="text" id="wbk"></textarea>
<input id="xxinput" type="submit" value="Send out"/>
</form>
</div>
</body>
</html>div와 양식이 페이지의 중간 부분만 차지하도록 합니다. 양식이 맨 아래에 있다는 것
텍스트 영역을 포장하고 입력=너비를 너비=60%로 제출하여 맨 아래에 도달합니다.
2. text-align:center;
페이지 레이아웃 시 매우 강력한 속성입니다
*
{
padding: 0;
margin: 0;
}
.main{
width: 100%;
}
form{
position:fixed;
bottom: 0;
width: 100%;
text-align: center;
}
input{
position: relative;
bottom:24px;
}양식 너비가 전체 화면을 덮을 때 text-align:center는 중앙 정렬을 달성한 다음 이를 고정합니다. 바닥.
3 left:50%;margin-left:-half body;
이 방법은 매우 간단하고 빠릅니다.
<div class="main" >
<form id="wiselyForm" >
<textarea rows="4" cols="60" name="text" id="wbk"></textarea>
<input id="xxinput" type="submit" value="Send out"/>
</form>
</div>css:
*{
padding: 0 ;
margin:0;
}
form{
position: fixed;
bottom: 0;
left: 50%;/*相对于可视区窗口，距离窗口左边50%个可视区窗口*/
margin-left:-237px ;/*表格左边距离浏览器左边50%，向左偏移一半的身位表格即可居中*/
}창을 아무리 확대하거나 축소해도 , 테이블은 동일합니다. 센터링, 포커스는 여백-왼쪽= - 테이블의 절반 px
위는 CSS 하단을 일치시키는 방법입니다. CSS의 세 가지 센터링 방법에 대한 전체 소개입니다. CSS 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.
위 내용은 CSS의 하단을 일치시키는 방법은 무엇입니까? CSS 세 가지 센터링 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!