如何定位<fieldset>標記？

-2

HTML代碼：

<html> 
<head> 
    <style> 
    body { 
     background-color: #f42b68; 
     width: 100%; 
    } 
    fieldset { 
     height: 50%; 
     width: 80%; 
     background: #ffffff; 
    } 
    </style> 
</head> 
<body> 
    <center> 
    <fieldset> 
     <form> 
     <input type="text" placeholder="txt"> 
     </form> 
    </fieldset> 
    </center> 
</body> 
</html>

是否有任何可能的方式來做到這一點以外使用center標籤？

來源

2017-01-26 stodgy.nerd

字段集被假設是形式的孩子，而不是相反:) –

您需要爲目標的input本身而不是fieldset，爲input在默認情況下text-align: start。什麼你要找的是：

fieldset input { 
    text-align: center; 
}

要對齊fieldet 本身，它的行爲有點不同，因爲它是塊元素，而不是文字。要集中對齊塊元素，您需要給它margin: auto。這也可以通過顯式定義它們作爲一個塊級元素與display: block與圖像（或任何其他元素）使用：

fieldset { 
    margin: auto; 
}

記住margin: auto被闡明，所有四個利潤率應該可以自動偏移（集中）。這包括頂部和底部邊距。您可以將左右邊距與簡寫margin: 0 auto對齊。

更新代碼：

body { 
 
    background-color: #f42b68; 
 
    width: 100%; 
 
} 
 
fieldset { 
 
    height: 50%; 
 
    width: 80%; 
 
    background: #ffffff; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 
fieldset input { 
 
    text-align: center; 
 
}

<body> 
 
    <fieldset> 
 
    <form> 
 
     <input type="text" placeholder="txt"> 
 
    </form> 
 
    </fieldset> 
 
</body>

希望這有助於！

來源

2017-01-26 22:10:48

你忘了從html中刪除'

'標籤。 –

請參閱我已將

置於標記下。我問，如果不使用，我可以將fieldset放在中心位置，而不是fieldset的內容。 –

'標籤在HTML中絕對沒有任何內容。它不會將內容與中心對齊，也不會通過包含它來破壞任何現有的邏輯。這是沒用的，所以我已經更新了我的代碼，將其刪除:) –

只需在字段中添加text-align和margin即可。這將產生與沒有<center>標籤的代碼相同的結果。

body 
 
{ 
 
    background-color: #f42b68; 
 
    width: 100%; 
 
} 
 
fieldset 
 
{ 
 
    height: 50%; 
 
    width: 80%; 
 
    background: #ffffff; 
 
    text-align:center; 
 
    margin:auto; 
 
}

<body> 
 

 
<fieldset> 
 
    <form> 
 
    <input type="text" placeholder="txt"> 
 
    </form> 
 
</fieldset> 
 

 
</body>

來源

2017-01-26 22:10:44

我沒有要求的

內容，我寫

下排列在中心的字段集，但我想知道我可以不用使用標籤 –

對不起，我錯過了代碼中的一行。一探究竟。 –

如何定位<fieldset>標記？

回答

相關問題