HTML是網頁開發的重要技術之一，通過HTML可以實現網頁的各種功能，包括登錄界面的設計。在設計登錄界面時，我們常常需要將登錄框與頁面居中顯示，讓用戶更加舒適地進行登錄操作。下面我們來學習一些HTML代碼如何實現居中對齊的效果。
首先，我們需要在HTML中創建一個div標簽，該標簽將作為整個登錄框的容器。然后，我們可以使用CSS的text-align屬性來使該div內容居中對齊。例如，下面的代碼可以將整個登錄框居中對齊：
<style>
.container {
text-align: center;
}
.login-box {
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
margin-top: 50px;
padding: 20px;
}
</style>
<body>
<div class="container">
<div class="login-box">
<h3>用戶登錄</h3>
<form>
<p>用戶名：<input type="text" name="username" /></p>
<p>密 碼：<input type="password" name="password" /></p>
<p><button type="submit">登錄</button></p>
</form>
</div>
</div>
</body>在上述代碼中，我們創建了一個名為.container的class樣式，并設置了text-align:center屬性，將整個登錄框容器居中對齊。同時，我們還定義了.login-box類樣式，對登錄框進行了一些其他的樣式設置，例如設置了寬度400px，高度300px，背景色為白色，邊框為1px實線的灰色，圓角5px等。除此之外，我們還在.css樣式中設置了margin-top:50px屬性，使登錄框距離頁面頂部有一定的距離，不至于太靠上。
最后，我們在登錄框容器中添加了一個form表單，用于實現用戶登錄功能。在form表單中包含了用戶名和密碼輸入框，以及一個登錄按鈕。通過這些HTML和CSS的設置，我們可以輕松地創建一個美觀、實用、居中對齊的HTML登錄界面。上一篇css 圖片旋轉 并移動
下一篇css 列表前的圓點