How to horizontally centre floated text - html

Question

if you go and reduce the width of the window to view the screen as if it were a mobile device you can see that the orange "badges" may not be entered (especially when only one badge fits per line) I want it to fit more badges in if possible whilst always keeping the badge, or group of badges on that line entered horizontally. The class is badge that isn't being centered Thank you in advance!! :)
jsfiddle: http://jsfiddle.net/avg24wrk/
This is the HTML
<div class="container">
<div class="sidebar">
<div class="sidebar-inner">
<p class="badge"><span class="vertical-align">Book a Free Consultation!</span></p>
<p class="badge"><span class="vertical-align">Second Point</span></p>
<p class="badge"><span class="vertical-align">Third Point</span></p>
</div>
</div>
and this is the CSS
* {
border: 0;
margin: 0;
padding: 0;
}
.sidebar {
float: left;
width: 25%;
color: #505050;
}
.sidebar-inner {
margin: 0 30px 0 35px;
}
.badge {
margin: 10px auto;
font-size: 24px;
text-align: center;
border-radius: 7px;
padding: 20px 20px;
background-color: #ed9727;
cursor: pointer;
}
#media screen and (max-width: 490px) {
.sidebar {
width: 100%;
}
.sidebar-inner {
padding-bottom: 20px;
border-bottom: 2px solid #505050;
margin: 0 30px;
overflow: hidden;
}
.badge {
float: left;
margin: 15px 10px;
max-width: 150px;
min-height: 50px;
display: table;
}
}

Answer 1

have you tried adding text-align: center; to class you want to center
since i you didn't mention which class you want to center so i will give you a simple rule try this
please mention class you want to center