首頁 > 文章 > web前端 > html怎樣將表單居中

html怎樣將表單居中

coldplay.xixi原創: 2021-02-20 15:21:4125433瀏覽

html將表單置中的方法：先表單外加一個父標籤fa；然後表單加上一個類別centered，程式碼為【

html怎樣將表單居中

#本教學操作環境：windows7系統、html5版，DELL G3電腦，此方法適用於所有品牌電腦。

html將表單居中的方法：

表單寬高不固定情況下，表單外面加一個父標籤fa，表單加一個類別centered

<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>

清除頁面預設樣式後(margin padding)

<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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html定義清單標記有什麼下一篇：html定義清單標記有什麼

看更多