如何是HTML頁面中的表單居中顯示

2022-03-11 11:36:31 字數 2206 閱讀 3511

在進行前端頁面設定的時候，發現寫完的form表單始終無法居中顯示，詳細如圖1所示：

圖1：問題圖示

**如下：

<


form 


class


="form-inline"


>


<


div 


class


="form-group"


>


<


label 


for="exampleinputname2"


>證書編號:


label


>


<


input 


type


="text"


class


="form-control"


id="exampleinputname2"


placeholder


="請準確輸入證書編號"


>


div>


<


div 


class


="form-group"


>


<


label 


for="exampleinputemail2"


>獲證組織名稱:


label


>


<


input 


type


="email"


class


="form-control"


id="exampleinputemail2"


placeholder


="輸入不少於5個字元"


>


div>


<


button 


type


="submit"


class


="btn btn-default"


>查詢


button


>


form


>
分析原因：form本來就只是乙個表單而已，對頁面根本就沒有布局上的作用.，因此無論怎麼設定都是無法居中的，但是依舊有辦法解決的；

解決辦法：在外面套一層

**如下：

<


div 


style


="width:100%;text-align:center"


>


<


form 


class


="form-inline"


>


<


div 


class


="form-group"


>


<


label 


for="exampleinputname2"


>證書編號:


label


>


<


input 


type


="text"


class


="form-control"


id="exampleinputname2"


placeholder


="請準確輸入證書編號"


>


div>


<


div 


class


="form-group"


>


<


label 


for="exampleinputemail2"


>獲證組織名稱:


label


>


<


input 


type


="email"


class


="form-control"


id="exampleinputemail2"


placeholder


="輸入不少於5個字元"


>


div>


<


button 


type


="submit"


class


="btn btn-default"


>查詢


button


>


form


>


div>
最終效果如圖2所示：

如何讓div頁面居中 讓div在頁面居中的方法

在頁面 最上面加上 再把div的style加上 margin 0 auto dflzzp dflzzp 如果無法運用.來設定層居中.出現這樣問題可能是沒有加hmlt的 2,嚴格型 3,框架型 如果對css 2.0標準不太熟悉不要使用嚴格型的dtd.我們現在使用過渡期的就行了 在網頁最頂剖加上 萬物都...

HTML頁面表單控制項的包裝類

眾所周知我們經常需要給頁面的表單賦值或設定,有時候需要批量設定.但是一些表單的賦值操作可能不一樣,利用jquery或者其他工具可以統一解決這個問題 另外的辦法就是把這些表單控制項用乙個類包裝起來,然後提供統一的方法來呼叫,這樣就可以直接操作這些包裝類了.下面是我的實現方法 測試檔案 test.htm...

html的乍麼使整個頁面居中

今天寫個jsp頁面，乍麼調來調去 divstyle margin 0 auto 123 這個屬怎麼弄都不能讓頁面居中展示，而且其它樣式也出現莫名其妙的問題 後來在 找這個這個問題的解決方案 原來是l blog預設沒有在html前加上dtd,於是ie就以html而不是xhtml來解釋文件.問題並不在c...