Question

所以桌子完全居中。但是td标签不正确。我希望输入按钮全部居中，两者之间没有任何空间。我已经调整了中心，但似乎没有任何工作。

<html>
<head>
<title>BuyRite Liquor Store - English Town Road (Old Bridge, NJ)</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>




</head>
<body>

	<table align ="center">		
		
	<form> 
		
		<tr width = "100%">
			<td align="center"><input type="text" id = "input" name = "dbname" placeholder="Database Name"></td>
			<td align="center"><input type="text" id = "input" name = "tblname" placeholder="Table Name"></td>
		</tr>
		
		<tr>
			<td align="center"><input class= "button2-link" type="submit" name="createDB" value="Create Database"></td>	
			<td align="center"><input class= "button2-link" type="submit" name="deleteDB" value="Delete Database"></td>
		</tr>			
		
		<tr>
			<td align="center" width="1px"><input class= "button2-link" type="submit" name="createTBL" value="Create Table"></td> 
			<td align="center" width="1px"><input class= "button2-link" type="submit" name="emptyTBL" value="Empty Table"></td> 
			<td align="center" width="1px"><input class= "button2-link" type="submit" name="deleteTBL" value="Delete Table"></td> 
		</tr>
	
	</table>
	</form>
	
	

</body> 
</html>

Answer 1

按钮位于<td>标记的中心位置。如果你把你想要的所有按钮都放在一个td中，它们都会居中。

See the JSBin.

<html>
  <head>
    <title>BuyRite Liquor Store - English Town Road (Old Bridge, NJ)</title>
  </head>
  <body>
    <form> 
      <table align="center">   
        <tr width="100%">
          <td align="center">
            <input type="text" id="input" name="dbname" placeholder="Database Name">
            <input type="text" id="input" name="tblname" placeholder="Table Name">
          </td>
        </tr>
        <tr>
          <td align="center">
            <input class="btnCreateDB" type="submit" name="createDB" value="Create Database">
            <input class="btnDeleteDB" type="submit" name="deleteDB" value="Delete Database">
          </td>
        </tr>     
        <tr>
          <td align="center" width="1px">
            <input class="btnCreateTable" type="submit" name="createTBL" value="Create Table">
            <input class="btnEmptyTable" type="submit" name="emptyTBL" value="Empty Table">
            <input class="btnDeleteTable" type="submit" name="deleteTBL" value="Delete Table">
          </td> 
        </tr>
      </table>
    </form>
  </body> 
</html>

Answer 2

要回答你的问题，浏览器会给输入元素一个默认的填充 - 在chrome中这是1px，而在chrome中的边框也是1px标记左右。

要删除我在<style>元素中添加的边框，该元素明确指明任何<input>元素的<td>元素将具有填充0像素。我给出了两个输入，你指的是.input类，这样风格就不适用于其他地方了。

请在此处查看JS小提琴：http://jsfiddle.net/cmmvn9dd/1/

<html>
<head>
<title>BuyRite Liquor Store - English Town Road (Old Bridge, NJ)</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<style>

td input {
  padding:0px;
}

</style>


</head>
<body>

  <table align ="center">       

  <form> 

    <tr width = "100%">
      <td align="center"><input type="text" class="input" name = "dbname" placeholder="Database Name"></td>
      <td align="center"><input type="text"  class="input" name = "tblname" placeholder="Table Name"></td>
    </tr>

    <tr>
      <td align="center"><input class= "button2-link" type="submit" name="createDB" value="Create Database"></td>   
      <td align="center"><input class= "button2-link" type="submit" name="deleteDB" value="Delete Database"></td>
    </tr>           

    <tr>
      <td align="center" width="1px"><input class= "button2-link" type="submit" name="createTBL" value="Create Table"></td> 
      <td align="center" width="1px"><input class= "button2-link" type="submit" name="emptyTBL" value="Empty Table"></td> 
      <td align="center" width="1px"><input class= "button2-link" type="submit" name="deleteTBL" value="Delete Table"></td> 
    </tr>

  </table>
  </form>



</body>  
</html>

将输入按钮置于表格中心

2 个答案: