居中一個格內的表格

我有一個簡單的聯繫表格在一個div中，但我不能讓它在div中心。我已經嘗試過邊距，填充，文本對齊：中心，但沒有一個工作。居中一個格內的表格

HTML：http://www.joekellywebdesign.com/churchsample/contact.html

<div id="contactbottomright"> 
     <h2>Contact Form</h2> 

    <form action="feedback.php" method="post"> 
     <table border="0" cellpadding="8" cellspacing="8"> 
      <tr> 
       <td> 
        <label for="tswname">Name</label>:</td> 
       <td> 
        <input type="text" name="fullname" id="tswname" size="25" /> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <label for="tswemail">Email address</label>:</td> 
       <td> 
        <input type="text" id="tswemail" name="email" size="25" /> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2"> 
        <label for="tswcomments">Comments</label> 
        <br /> 
        <textarea rows="15" cols="35" name="comments" id="tswcomments"></textarea> 
       </td> 
      </tr> 
      <tr> 
       <td align="center" colspan="2"> 
        <input type="submit" value="Submit" /> 
        <br /> 
       </td> 
      </tr> 
     </table> 
    </form> 
</div>

CSS：http://www.joekellywebdesign.com/churchsample/css/styles.css

/* rules for contact page */ 

#contactbottomleft {z-index:26; width:450px;height: 700px; background-color:#92B681; margin: 30px 0 0 0; float:left;position: relative;} 

#contactbottomright { z-index:27; width:450px; height: 700px; margin: 30px 0 0 0px; background-color:#428C3E; float:right;position: relative;} 

form { 
    display: inline-block; 
    text-align: center; 
} 

    /* end rules for contact page */

來源

2013-10-01 Joe Elmore

重複？ http://stackoverflow.com/search?q=centering+div – Gavriel

對不起，您可以取消所有努力，但您可以突出顯示整個代碼並單擊'{}'按鈕添加代碼格式，而不是添加反引號到每一行。 – JJJ

@Juhana我不知道那樣做了。 Soooo很多次我都想要這個，哈哈。謝謝！ –

你可以寬度設置爲窗體，然後添加margin: 0 auto;到CSS。例如：

HTML：

<div> 
    <form></form> 
</div>

CSS：

form { 
    margin: 0 auto; 
    width: 300px; 
}

注：對於此工作，必須從form刪除display:inline-block。

JS Fiddle Example (using your HTML/CSS)。

來源

2013-10-01 15:15:42 JSW189

這似乎並不奏效 –

@JoeElmore刪除line104'display：inline-block;' – Xareyo

@JoeElmore這裏有一個[jsFiddle]（http://jsfiddle.net/LBqbP/）顯示這個答案的行動。 –

您必須設置Ancestor元素的寬度，然後將margin:0 auto添加到其子元素。請參閱demo

來源

2013-10-01 15:21:56

居中一個格內的表格

回答

相關問題