我怎样才能将标签和文本框与中心对齐？ CSS

Question

我目前有以下表格

使用以下CSS：

#myForm form {
  background-color: #E0E0E0;
  text-align: center;
}
#myForm label {
  display: inline-block;
  text-align: right;
  clear: left;
  width: 150px;
  text-align: right; 
}
#myForm input {
  display: inline-block;
  text-align: center;
}
#myForm select {
  display: inline-block;
  text-align: center;
}

html div示例：

<div id = "myForm">
        <form>
            <p> <label for="username">Username: </label>
                <input type="text" id="username" name="username" size=20 /></p>
            </p>
        </form>

我怎样才能将我的标签和文本框居中，因为它看起来有点偏离中心。另外我怎么能这样做，以便灰色背景是一个居中而不是占据整个屏幕宽度的盒子。

Answer 1

试试这个css，可能这对你有帮助并且看到小提琴链接：

CSS：

label {
  float: left;
  text-align: center;
  width: 50%;
}
p {
  float: none;
  margin: 10px auto;
  width: 50%;
}
form {
  background-color: red;
  float: left;
  margin: 0 auto;
  width: 100%;
}

见FIDDLE

Answer 2

我想出了问题。我使用了下面的css：

#myForm {
    margin: auto;
    width: 500px;
}

Answer 3

<强> HTML：

<div id = "myForm">
        <form>
            <p> <label for="username">Username: </label>
                <input type="text" id="username" name="username" size=20 /></p>
            </p>
        </form>
</div>

或只是......

<div id = "myForm">
        <form>
             Username: <input type="text" id="username" name="username" size=20 />
        </form>
</div>

CSS （删除你写的所有内容）：

#myForm{
    text-align:center;
}