집 > 기사 > 웹 프론트엔드 > HTML에서 양식을 중앙에 맞추는 방법

HTML에서 양식을 중앙에 맞추는 방법

coldplay.xixi원래의: 2021-02-20 15:21:4125355검색

HTML에서 양식을 중앙에 배치하는 방법: 먼저 양식 외부에 상위 태그를 추가한 다음 양식 중앙에 클래스를 추가합니다. 코드는 [

이 튜토리얼의 운영 환경: windows7 시스템, html5 버전, DELL G3 컴퓨터. 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

html 중심 방법 양식:

양식 너비 및 높이가 고정되어 있지 않으면 양식 외부에 부모 태그 fa를 추가하고 중앙에 클래스를 추가합니다

<body>   
<div class="fa">
    <form name="search" method="post" action="#" class="centered">
       <input value="请输入关键词" type="text" name="q" />
       <input type="submit" value="搜索"/>
    </form>
</div>
</body>

페이지의 기본 스타일(여백 패딩)을 지운 후

<style type="text/css"> 
html,body{width: 100%;height: 100%;}
.fa {text-align: center;height: 100%;}
.fa:before {content: &#39;&#39;;display: inline-block;height: 100%;vertical-align: middle;}
.centered {display: inline-block;vertical-align: middle;background: red;width: auto;}
</style>

관련 학습 권장사항: html 튜토리얼

위 내용은 HTML에서 양식을 중앙에 맞추는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML 정의 목록 태그란 무엇입니까?다음 기사：HTML 정의 목록 태그란 무엇입니까?