Unable to Center Text using CSS - html

Question

Not sure what I am doing wrong here but I can seem to get some text centered in one of my div's. Ive tried using text-align:center; on the divs, setting width 100% and margin: 0, auto but nothing seems to be working.
Here is the Code and a Fiddle
Thanks
.banner_category { float:left; width:195px; border:solid 1px #b3b3b3; border-radius:3px; margin:0 30px 30px 0; }
.banner_category.ban4, .banner_category.ban8 { margin-right:0; }
.banner_category .banner_img { border-radius:2px; overflow:hidden; }
.banner_category .banner_img img { max-width:100%; }
.banner_category .banner_holder {
padding:12px 2px 13px 2px;
margin: 0 auto;
text-align:center;
overflow:hidden;
background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f3f3f3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%, #f3f3f3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%, #f3f3f3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%, #f3f3f3 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3', GradientType=0 ); /* IE6-9 */
border-radius:0 0 2px 2px;
}
.banner_category:hover .banner_holder {
padding:12px 2px 13px 2px;
margin: 0 auto;
text-align:center;
background: #ff9c0e; /* Old browsers */
background: -moz-linear-gradient(top, #ff9c0e 0%, #ff7e06 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff9c0e), color-stop(100%, #ff7e06)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff9c0e 0%, #ff7e06 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff9c0e 0%, #ff7e06 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff9c0e 0%, #ff7e06 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff9c0e 0%, #ff7e06 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c0e', endColorstr='#ff7e06', GradientType=0 ); /* IE6-9 */
}
.banner_category .banner_holder h2 { float:left; margin:0 0 0 0; font-size:14px; font-weight:500; text-transform:uppercase; color:#0a9be0; }
.banner_category .banner_holder i { float:right; margin:1px 0 0 0; font-size:14px; color:#333333; font-style:normal; }
.banner_category:hover .banner_holder h2 { color:#fff; }
.banner_category:hover .banner_holder i {color:#fff; }
<div class="banners_block">
<div class="banner_category ban1">
<a href="{{url=''}}">
<div class="banner_img"><img src="{{url="wysiwyg/image.png"}}" alt="" style="display: block; margin: 0 auto;"/></div>
<div class="banner_holder">
<h2>Center Text</h2>
</div>
</a>
</div>
</div>
http://jsfiddle.net/hzGWk/11/

Answer 1

It's because you h2 is set to float:left. Remove that and it's fine
.banner_category .banner_holder h2 {
/*float: left;*/ //remove
margin: 0 0 0 0;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
color: #0a9be0;
text-align: center;
}
FIDDLE

Answer 2

remove the float: left; in your line: .banner_category .banner_holder h2 { float:left; margin:0 0 0 0; font-size:14px; font-weight:500; text-transform:uppercase; color:#0a9be0; text-align:center; }.