How to have an inline form centered and responsive

[newcoder1010]

Hello,

 I would like to have a responsive inline form. Form only has header, a text field and submit button. Form should be centered in every device.

<section id="block-webform-client-block-66" class="block block-webform bnh contextual-links-region clearfix">

<h2 class="block-title">Get Your Offer NOW!</h2>

<form class="webform-client-form webform-client-form-66" action="/" method="post" id="webform-client-form-66" accept-charset="UTF-8">

<div>

<div class="form-item webform-component webform-component-markup webform-component--get-your-fair-cash-offer-now form-group form-item form-type-markup form-group">
<h2>Enter Address NOW!</h2>
</div>

<div class="form-item webform-component webform-component-textfield webform-component--property-address form-group form-item form-item-submitted-property-address form-type-textfield form-group">

<input required="required" placeholder="Property Address" class="form-control form-text required" type="text" id="edit-submitted-property-address--2" name="submitted[property_address]" value="" size="60" maxlength="128">

<label class="control-label element-invisible" for="edit-submitted-property-address--2">Property Address <span class="form-required" title="This field is required.">*</span></label>
</div>

<input type="hidden" name="details[sid]">

<div class="form-actions"><button class="webform-submit button-primary btn btn-default form-submit" type="submit" name="op" value="Get Your Offer">Get Your Offer</button>
</div>

</div>

</form>
</section>

#block-webform-client-block-66{
    background: bisque;
    padding: 0;
    margin: 0;
    text-align: center;
}

.webform-client-form-66 {
    display: block;
    text-align: center;
}

.webform-client-form-66 .webform-component--property-address {
    margin-top: 0px;
    /* display: inline; */
    margin-top: 0;
    text-align: center;
    margin-bottom: 33px;
    float: left;
}

.webform-client-form-66 .form-actions {
    clear: none;
    margin-top: 0;
    float: left;
    margin-left: 40px;
}

Now the header is centered but the form floated to left. I tried to make the form 50%width and then margin:auto. Then it works somewhat. Please advise how to place the form centered and responsive. 

Edited November 12, 2017 by newcoder1010

[dsonesuk]

To centre an inline element its parent container must be the full width of available space with text-align: center;  if you use float on parent, the parent container will collapse to width of content i.e inputs and text to the left or right depending which float is used. It is still centred, but is restricted to the collapsed width of parent.

To be responsive you can't use size attribute on its own, you need to use css width with percentage value, with min-width: of 300px (small 320px mobile width minus padding etc).

Normally when it gets down to small width devices, the display: inline-block elements are changed to display: block; using media queries, so they will stack above each other.

[newcoder1010]

Thanks. It worked now.