在進行前端頁面設置的時候，發現寫完的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本來就只是一個表單而已，對頁面根本就沒有布局上的作用.，因此無論怎么設置都是無法居中的，但是依舊有辦法解決的；

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

代碼如下：

<div>
    <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所示：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。