css - 我怎样才能将我的标签和文本框对齐到中心？ 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，可能对你有帮助，看看 fiddle 链接:

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