使用CSS居中所有HTML表單元素

如何使用CSS居中所有表單標籤和輸入字段？使用CSS居中所有HTML表單元素

你會如何處理輸入字段頂部帶有標籤文本（塊）的表單？

#fieldset label { 
    display: block;  
} 

#fieldset input { 
    font-size: 0.8em; 
    height: 1.2em; 
    width: 15em; 
}

來源

2009-11-26 yos

你到底是什麼意思？你想要在頁面中居中表單嗎？或表單中的元素？或元素內的文字？ – darasd

我想集中兩個！ – yos

經常重複的問題。我知道的最近的一個重複是，它也有一個或兩個有用的答案。 –

form { 
    text-align: center; 
}

這取決於你的HTML和目前的CSS兩者。以上是一個起點。

來源

2009-11-26 11:50:26 Boldewyn

所有內聯元素都是通過文本對齊來實現的，只是屏蔽不會居中的元素。 –

僅以標籤爲中心，但不包含實際的輸入字段。 – yos

正如Boldewyn和Ben所說，文本對齊將以行內項目（例如跨度）爲中心。要中心塊元素（如div和表單和段落），給它一個寬度並將margin-right和margin-left設置爲auto。

瞭解difference between block and inline elements很重要。

來源

2009-11-26 12:01:01 darasd

用於表單標籤和輸入的通常「居中」實際上是2列，右對齊的標籤和左對齊的輸入字段。要做到這一點，而不表

一種方法是給標籤要素相同的寬度和右對齊它們，例如：

<style type="text/css"> 
    .foolabel{width:10em;text-align:right;display:inline-block;margin-right:1em;} 
    .formlist{list-style:none} 
</style> 
<ul class="formlist"> 
    <li><label class="foolabel">Name:</label><input type="text" /></li> 
    <li><label class="foolabel">Quest:</label><input type="text" /></li> 
    <li><label class="foolabel">Favorite Color:</label><input type="text" /></li> 
</ul>

來源

2009-11-26 12:01:05 orip

使用CSS居中所有HTML表單元素

回答

相關問題