Question

Could someone help me? I am with this form trying to centralize all fields in it. I've tried a bunch of different stuff, and I've noticed that the code works differently inside the theme that I am using. Is there another way to do it rather than margin: 0 auto;? Any help will be really appreciated.
Here is the url. Thank you

<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;
}

Answer 2

尝试将<form>封闭在<center>代码

中

此外，如果您希望表单中的元素采用垂直对齐的方式，则将{strong> <{>}的每个直接子项设置为浮点数

如果这不是您想要的，请详细说明您的问题和预期结果。

How to centralize content inside a form

2 个答案: