html - 如何将内容集中在表单中

Question

有人可以帮助我吗？我使用这种形式试图集中其中的所有字段。我尝试了很多不同的东西，我注意到代码在我使用的主题中的工作方式不同。除了 margin: 0 auto; 之外，还有其他方法吗？任何帮助将不胜感激。
这是url .谢谢

<div id="instant-quote-form">
    <form action="http://natesolutions.vonigo.com/external/" accept-charset="UTF-8" method="get" onsubmit="return submitForm(this)">
        <div class="instant-quote">
            <h3 class="quote-title">Instant Online Quote</h3>  
        </div>
        <div class="house-type">
            <input type="radio" onclick="showServices(this)" id="xclientTypeID" name="xclientTypeID" value="1" checked />Residential
            <input type="radio" onclick="showServices(this)" id="xclientTypeID" name="xclientTypeID" value="2" />Commercial
        </div>
        <div class="zip-code">
            <input type="text" id="zip" name="zip" value="" placeholder="Enter Postal Code"/>        
        </div>
        <div class="house-size" id="divServices1">
            <select id="xserviceTypeID1" onchange="changeService(this)">
                <option value="14" selected>Small House (1200-2000sq.ft)</option>
                <option value="17">Medium House (2001-2800sq.ft)</option>
                <option value="18">Large House (2801-3500sq.ft)</option>
                <option value="19">XL House (3500+)</option>
            </select>
        </div>
        <div class="button-go">
            <input type="submit" value="Go" />
        </div>    
        <input type="hidden" id="xserviceTypeID2" value="20" />
        <input type="hidden" id="xserviceTypeID5" value="20" />
        <input type="hidden" id="clientTypeID" name="clientTypeID" value="1" />
        <input type="hidden" id="serviceTypeID" name="serviceTypeID" value="14" />
    </form>
</div>
<style>
    #instant-quote-form {
        width: 100%;
        margin: 0 auto;
    }
    .instant-quote {
        float: left;
        margin: 20px 5px;
        padding-top: 4px;
    }
    .house-type {
        float: left;
        margin: 20px 5px;
        color: #ffffff;
        font-size: 16px;
        padding-top: 5px;
    }
    .zip-code {
        float: left;
        margin: 20px 5px;
        border: 1px solid #ffffff;
        border-radius: 3px;
        color: #000000;
    }
    .house-size {
        float: left;
        margin: 20px 5px;
        border: 1px solid #ffffff;
        border-radius: 3px;
        color: #000000;
    }
    select#xserviceTypeID1 {
        border: 1px solid #ffffff;
        font-size: 13px;
        padding: 10px;
        color: #000000;
    }
    .button-go {
        float: left;
        margin: 20px 5px;
    }
    h3.quote-title {
        margin-bottom: 0;
        color: #ffffff;
    }
    input#zip {
        margin-bottom: 0;
        border: 1px solid #ffffff;
        font-size: 13px;
        padding: 9px;
    }
    input#zip::placeholder {
        color: #000000;
    }
    input[type=text]::placeholder {
        color: #000000;
    }
    input#xclientTypeID {
        margin: 0 5px;
    }
    input[type="submit"] {
        height: 37px;
        width: 50px;
        background: #55b948;
        color: #fff;
        border-radius: 3px;
        text-transform: uppercase;
        border: 1px solid #55b948;
        font-weight: bold;
    }
</style>

Answer 1

作为您的 #instant-quote-form与其父元素一样宽，将此元素居中不会做任何事情。您需要做的是将 <form> 居中在它的容器里面。这可以通过应用 display:flex 来完成。至 #instant-quote-form然后 margin:0 auto至 #instant-quote-form > form :

#instant-quote-form {
    display: flex;
}
#instant-quote-form > form {
    margin: 0 auto;
}