无法使用 CSS 将文本居中

Question

不确定我在这里做错了什么，但我似乎可以在我的一个 div 中获得一些文本。我试过使用 text-align:center;在 div 上，设置宽度 100% 和边距：0，自动，但似乎没有任何效果。

这是代码和小提琴 谢谢

.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

这是因为您将h2 设置为float:left。去掉就好了

.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

删除您的行中的float: left;：.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; }。