在進(jìn)行前端頁(yè)面設(shè)置的時(shí)候，發(fā)現(xiàn)寫(xiě)完的form表單始終無(wú)法居中顯示，詳細(xì)如圖1所示：

圖1：?jiǎn)栴}圖示

代碼如下：

<form class="form-inline" >
        <div class="form-group">
            <label for="exampleInputName2">證書(shū)編號(hào):</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="請(qǐng)準(zhǔn)確輸入證書(shū)編號(hào)">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">獲證組織名稱(chēng):</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="輸入不少于5個(gè)字符">
        </div>
        <button type="submit" class="btn btn-default">查詢</button>
    </form>

分析原因：form本來(lái)就只是一個(gè)表單而已，對(duì)頁(yè)面根本就沒(méi)有布局上的作用.，因此無(wú)論怎么設(shè)置都是無(wú)法居中的，但是依舊有辦法解決的；

解決辦法：在外面套一層<divstyle="100%;text-align:center"></div>

代碼如下：

<div>
    <form class="form-inline" >
        <div class="form-group">
            <label for="exampleInputName2">證書(shū)編號(hào):</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="請(qǐng)準(zhǔn)確輸入證書(shū)編號(hào)">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">獲證組織名稱(chēng):</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="輸入不少于5個(gè)字符">
        </div>
        <button type="submit" class="btn btn-default">查詢</button>
    </form>
    </div>

最終效果如圖2所示：

總結(jié)

以上是生活随笔為你收集整理的如何是HTML页面中的表单居中显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。