Question

希望以标签为中心表单中的文本框。 HTML代码：

<html>
<head> 
    <title></title>
     <link rel="stylesheet" type="text/css" href="css/style.css">
</head>     
<body>
    <div id="table">
        </br><label for="sFX">F(X)</label><input name="sFX" id="inpBox" type="text" value=""/>
        </br><label for="x0">X0</label><input name="x0" id="inpBox" type="text" value=""/>
        </br><label for="x1">X1</label><input name="x1" id="inpBox" type="text" value=""/>
        </br></label><input id="btnStart" type="button" value="Start" onclick="process()"/>
    </div>
</body>
</html>

CSS代码：

#table{
background-color:lightblue;
width:400px;
height:200px;
display:block;
margin-left:auto;
margin-right:auto;
background-color:lightblue;
text-align:right;   
 }

#inpBox{
width: 100px;
margin-left:auto;
margin-right:auto;
 }

label {
   width: 20px;
   margin-left:auto;
   margin-right:auto;   
}

这就是我得到的：

我发现无法让物品居中。怎么办？

Answer 1

＆＃13;

    #table {
      background-color: lightblue;
      width: 400px;
      height: 200px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      background-color: lightblue;
      text-align: center;
      padding:20px;
    }
    table{
     margin:0 auto;
    }
    #inpBox {
      width: 100px;
      margin-left: auto;
      margin-right: auto;
    }
    label {
      width: 20px;
      margin-left: auto;
      margin-right: auto;
    }

＆＃13;

    <html>

    <head>
      <title></title>
      <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
      <div id="table">
        <table style="">
         <tr>
          <td><label for="sFX">F(X)</label>
          </td>
          <td><input name="sFX" id="inpBox" type="text" value="" />
          </td>
          </tr>
<tr>
          <td><label for="x0">X0</label>
          </td>
          <td><input name="x0" id="inpBox" type="text" value="" />
          </td>
          </tr>
<tr>
          <td><label for="x1">X1</label>
          </td>
          <td><input name="x1" id="inpBox" type="text" value="" />
          </td>
          </tr>
<tr>
          <td>
          </td>
          <td style="text-align:left"><input id="btnStart" type="button" value="Start" onclick="process()" />
          </td>
          </tr>
        </table>
        
      </div>
    </body>

    </html>

＆＃13;

Answer 2

使用text-align: center;水平对齐中心的元素。

＆＃13;

#table {
  background-color: lightblue;
  width: 400px;
  height: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: lightblue;
}
#inpBox {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}
label {
  width: 20px;
  margin-left: auto;
  margin-right: auto;
}
table {
  margin: 0px auto;
}

＆＃13;

<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div id="table">
    </br>
    <table>
      <tr>
        <td>
          <label for="sFX">F(X)</label>
        </td>
        <td>
          <input name="sFX" id="inpBox" type="text" value="" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="x0">X0</label>
        </td>
        <td>
          <input name="x0" id="inpBox" type="text" value="" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="x1">X1</label>
        </td>
        <td>
          <input name="x1" id="inpBox" type="text" value="" />
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center">
          <input id="btnStart" type="button" value="Start" onclick="process()" />
        </td>
      </tr>
    </table>
</body>

</html>

＆＃13;

Answer 3

你去吧 https://jsfiddle.net/4r6h8u5c/

<div id="table">
    <label for="sFX">
      <span>F(X)</span>
      <input name="sFX" class="inpBox" type="text" value=""/>
    </label>
    <label for="x0">
    <span>X0</span>
      <input name="x0" class="inpBox" type="text" value=""/></label>
    <label for="x1">
    <span>X1</span>
      <input name="x1" class="inpBox" type="text" value=""/></label>
    <div class="submit">
    <input id="btnStart" type="button" value="Start" onclick="process()"/>
    </div>
</div>

CSS

#table {
    background - color: lightblue;
    width: 400 px;
    height: 200 px;
    display: block;
    background - color: lightblue;
    margin: 0 auto;
}

.inpBox {
    width: 100 px;
    margin - left: auto;
    margin - right: auto;
}

label {
    display: block;
    text - align: center;
}
label span {
    display: inline - block;
    text - align: right;
    width: 70 px;
}
.submit {
    margin - top: 40 px;
    text - align: center;
}

我也清理了你的HTML和CSS。请记住，id是唯一的，不能用于不同的元素，而是使用类。

将项目置于<div> HTML中

3 个答案: