html - Centering an element with an adjacent element -

i have button need align center. next button need display (a checkmark example). have been trying have run problem that: 1) if use display:inline can't center 2) if use display:block can't add element next it

i have been trying figure out display:inline-block no avail

jfiddle: https://jsfiddle.net/2x5a5zdx/

code:

<input  type="button" class='btn btn-md btn-primary' value="submit responses" id="submitbttn"/>     <span class="green-success" id="surveysuccess" >&#10004</span>     <span class="red-danger" id="surveyfailure" >&#10006</span> 

and css

#submitbttn { margin:auto; display:inline-block; }  #surveysuccess, #surveyfailure {  } 

thank you

as have pointed out, margin: auto not center inline element.

since inline/inline-block level elements respect text-align property, add text-align: center parent element. in doing so, children elements centered since inline default.

updated example

.parent-element {     text-align: center; } .parent-element > span, .parent-element > input {     display: inline-block;   /* added example purposes */     vertical-align: middle; } 

alternatively, in supported browsers, utilize flexbox layouts , set display of parent element flex , add justify-content: center horizontal centering:

updated example

.parent-element {     display: flex;     justify-content: center; }