div 내에서 양식 가운데 맞추기

div 내에서 간단한 문의 양식이 있지만 해당 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 내가 그것을 원했던 여러 번, haha. 감사! –

당신은 폼에 너비를 설정 한 다음 CSS에 margin: 0 auto;를 추가 할 수 있습니다. 예를 들면 :

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/)이 있습니다. –

너비를 조상 요소로 설정 한 다음 margin:0 auto을 자식에 추가해야합니다. demo

출처

2013-10-01 15:21:56

div 내에서 양식 가운데 맞추기

답변

관련 문제