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

Question

我正在使用Bootstrap 3。

我需要将文本（h2）置于带背景的div中。我需要他的背景不是100％宽度。

我无法将它们置于列中（参见错误行为的屏幕截图）。

这是HTML：

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

            <div class="category-title">

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

            </div>

</div>

这就是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%;}

谢谢

Answer 1

将班级text-center添加到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

在div类中尝试text-center。跟随之类的东西。

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

Answer 3

从官方Bootstrap网站试试<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> 。 big regex

List<object[]>