這是一個CSS /設計問題。我有三個文本框，我想在網頁中心對齊。然後我想每個人的權利說明標籤。如何正確對齊帶有標籤的網頁上的文本框
當我使用屬性，如文本：對齊：中心，因爲標籤的長度不同，它拋出了文本框的aligment [見下面的圖片鏈接]
http://www.mediafire.com/imageview.php?quickkey=qcyoajm2iuk
是否有一個簡單的方法保持文本框對齊，然後在不改變文本框的情況下將標籤貼在右側？
謝謝。
基本上，您必須爲您的表單和float: left輸入和float: right標籤定義一個寬度，以便標籤位於輸入旁邊。這是一個在CSS中集中相對位置元素的技巧：margin: 0 auto但是你必須定義一個寬度。
你會遇到的問題是所有的輸入都會彼此相鄰。爲了防止你嵌套你的標籤和輸入一個元素。並清除浮游物。我會使用UL LI元素而不使用段落（例如在PW示例中），因爲大多數情況下，表單都是問題列表。
我已經做了一個例子給你： http://jsfiddle.net/Qs4pk/2/
使用<fieldset>標籤結合<label>。 Step by step explanation。
然後隨意對齊。
在你的截圖中，你有文本對齊：居中每個div內的元素。所以你正在看到你目前的方法正確的行爲。
相反，您需要將div（文本框和標籤元素的包圍框）居中，然後左對齊（這將是瀏覽器默認值）內部元素。
要居中一個div使用：
#content {
寬度：700像素; margin-left：auto; margin-right：auto; }
http://reisio.com/temp/form2.html
<!doctype html>
<html>
<head>
<title></title>
<style>
body {
margin: 8px;
padding: 0;
}
form {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
font: 12px sans-serif;
display: block !important;
display: inline-block;
overflow: hidden;
}
li {
float: left;
clear: left;
}
label {
display: block;
width: 200px;
height: 19px;
line-height: 19px;
position: relative;
margin: 0 0 5px;
cursor: pointer;
text-align: right;
}
input {
width: 120px;
position: absolute;
left: 0;
top: 0;
border: 1px solid gray;
padding: 1px 0;
height: 15px;
font: 12px sans-serif;
}
</style>
</head>
<body>
<form action="">
<ul>
<li>
<label><input> Beans</label>
</li>
<li>
<label><input> Cornbread</label>
</li>
</ul>
</form>
</body>
</html>
你的問題也有一個設計方面。 從用戶的角度來看，標籤和輸入文本框的最佳對齊方式是什麼？幾個月前，當我在MIX09上發現「Web Form Design」時，我感到非常驚訝（參見http://videos.visitmix.com/MIX09/C17F）。您將看到示例如何在一個位置標註並在其他位置輸入文本框時改善用戶體驗。這部影片改變了我在這方面的想法。您還可以查看http://www.lukew.com/presos/和「Web表單提示和驗證的最佳實踐」http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/，其中一些信息很密切。
極好的參考。喜歡那麼多:) – 2012-07-08 14:47:52