在 HTML 中居中表單
-
在 HTML 中使用 CSS
margin屬性居中表單 -
在 HTML 中使用 CSS
text-align屬性居中表單 -
在 HTML 中使用 CSS
width和margin-left屬性居中表單
本文將介紹在 HTML 中居中表單的方法。
在 HTML 中使用 CSS margin 屬性居中表單
我們可以使用 margin CSS 屬性在 HTML 中將表單居中。
樣式可以寫成 form 標籤中的內聯 CSS。margin 屬性定義了容器和相鄰元素之間的空間。
首先，我們可以提供值來為該屬性設定一個邊距。當我們使用單個值時，該值適用於容器的所有四個方向。
接下來，我們可以使用 margin 屬性的 auto 值來居中表單。為此，我們應該提供表單的 width，以便在給定寬度的中心進行調整。
auto 值將從左側和右側平均分配剩餘距離。
例如，建立一個 form 標籤，在其中寫入 style 屬性。在 style 屬性中，將 margin 屬性設定為 auto，將 width 屬性設定為 220px。
接下來，建立 text 的 input 標籤和 submit 的另一個 input 標籤。
下面的示例將建立一個居中的表單。表單的寬度為 220px，剩餘空間分為左右邊距。
通過這種方式，我們可以使用 HTML 中的 CSS 建立一個帶有 margin:auto 居中對齊的表單。
示例程式碼：
<form style="margin: auto; width: 220px;">
Enter name:<input type="text" />
<input type="submit" value="Submit"/>
</form>
在 HTML 中使用 CSS text-align 屬性居中表單
我們使用 text-align 屬性來指定 CSS 中文字的對齊方式。我們可以使用該屬性作為 form 標籤的內聯樣式來設定表單的對齊方式。
text-align 屬性採用 left、right、center、justify 等值。我們可以將值設定為 center 以將表單居中。
例如，將 text-align 屬性應用於 style 屬性中的 form 標籤，並將該屬性設定為 center。接下來，建立型別為 text 的 input 標籤，然後是 submit。
下面的示例將使表單的所有內容居中。但是，由於沒有指定邊距，表格佔據了整個塊。
通過這種方式，我們可以在 HTML 中將表單居中。
示例程式碼：
<form style="text-align: center; ">
Enter name:<input type="text"/> <br><br>
<input type="submit" value="Submit"/>
</form>
在 HTML 中使用 CSS width 和 margin-left 屬性居中表單
我們可以將表單的寬度設定為視口寬度的 50%，然後我們可以提供 25% 的寬度作為左側的邊距。我們可以使用 width 和 margin-left CSS 屬性來設定寬度和邊距並實現我們的目標。
最後，我們可以使用 vw 單位來指定長度。例如，將 width 設定為 50vw，將 margin-left 設定為 25vw 作為 form 標籤的 style 屬性。
這裡，值 50vw 將佔據視口寬度的 50%，而值 25vw 將給出視口寬度的 25% 作為左邊距。剩餘的 25% 空間將位於表格右側。
通過這種方式，我們可以在 HTML 中將表單居中。
示例程式碼：
<form style=" width: 50vw; margin-left : 25vw;">
Enter name:<input type="text"/> <br><br>
<input type="submit" value="Submit"/>
</form>