Centering an element with an adjacent element - html

Question

I basically have a button that I need to align center. Next to that button I need to display something (a checkmark for example). I have been trying to do this but have run into a problem that:
1) if i use display:inline I can't center it
2) if i use display:block I can't add another element next to it
I have been trying to figure it out with display:inline-block to 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 then the css
#submitBttn {
margin:auto;
display:inline-block;
}
#surveySuccess, #surveyFailure {
}
Thank you

Answer 1

As you have pointed out, margin: auto will not center an inline element.
Since inline/inline-block level elements respect the text-align property, you could simply add text-align: center to the parent element. In doing so, the children elements will be centered since they are inline by default.
Updated Example
.parent-element {
text-align: center;
}
.parent-element > span,
.parent-element > input {
display: inline-block; /* Added for example purposes */
vertical-align: middle;
}
Alternatively, in supported browsers, you could also utilize flexbox layouts and set the display of the parent element to flex and add justify-content: center for horizontal centering:
Updated Example
.parent-element {
display: flex;
justify-content: center;
}

Answer 2

To display the button and icons horizontally centered on the page, wrap them both in a div and set it's text-align property to center.
<div id="wrapper">
<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>
</div>
#wrapper {
text-align: center;
}

Answer 3

Basic
If you want to center the button and the checks together, as a whole, centering is simple. You just need to add text-align: center to the parent element (which you may have to introduce).
.container {
text-align: center;
}
<div class="container">
<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 This content <i>does</i> affect centering.</span>
</div>
Or, if you want the button itself to be centered, regardless of the labels, you can use position: absolute to pull the labels out of the flow. This is especially useful if you want to display only one label at a time. If you display both, they will be on top of each other, so you'd have to solve that.
.container {
text-align: center;
}
#surveySuccess, #surveyFailure {
position: absolute;
margin-left: 5px;
}
#surveyFailure {
display: none;
}
<div class="container">
<input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn" />
<span class="green-success" id="surveySuccess">&#10004 Button is not moved</span>
<span class="red-danger" id="surveyFailure">&#10006 Button is not moved</span>
</div>
Personally, I'd like to show labels like that through CSS mainly, so this code is slightly altered again, adding a feedback text in the span (if you like), but adding the check or cross (and color too) in CSS by setting a class of the span. By simply adding the class success or failure you can change the way symbol and the color of the single 'surveyResult' span you have now:
.container {
text-align: center;
}
#surveyResult {
position: absolute;
margin-left: 5px;
}
#surveyResult.success {
color: green;
}
#surveyResult.success::before {
/* \2714 is the CSS (hexadecimal) notation of ✔ */
content: '\2714 ';
}
#surveyResult.failure {
color: red;
}
#surveyResult.failure::before {
content: '\2716 ';
}
<div class="container">
<input type="button" class='btn btn-md btn-primary' value="Submit Responses" id="submitBttn" />
<span class="success" id="surveyResult">You did great!</span>
</div>