div中心文本的背景宽度不是100％

Question

I'm using Bootstrap 3.

I need to center a text (h2) in a div with a background. I need that his background not 100% width.

I cannot center them in their column(s) (see screenshot of wrong behavoiur).

This is HTML:

<div class="col-sm-6">

            <div class="category-title">

                <h2>{{ @value->category }}</h2>

            </div>

</div>

And this is the CSS:

    div.category-title{display:inline-block;
background-color:#E1001A;
padding:10px;
text-align:center;
margin:0 auto}

div.category-title > h2{color:#FFF;
text-align:center;
text-transform:uppercase;
font-size:200%;}

Thank you

Answer 1

Add class text-center to the parent element of category-title

 div.category-title { display: inline-block; background-color: #E1001A; padding: 10px; margin: 0 auto } div.category-title > h2 { color: #FFF; text-transform: uppercase; font-size: 200%; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="col-sm-6 text-center"> <div class="category-title"> <h2>Offerte Pala</h2> </div> </div> <div class="col-sm-6 text-center"> <div class="category-title"> <h2>Offerte Pala</h2> </div> </div> </div> 

Answer 2

Try text-center in div class. Something like following.

<div class="col-sm-6 text-center">
        <div class="category-title">
            <h2>{{ @value->category }}</h2>
 </div>

Answer 3

Try class="text-center" from official Bootstrap site. http://getbootstrap.com/css/

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>