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

我需要居中文本（h2）与div的背景。我需要他的背景不是100％的宽度。

我无法将它们居中放在其列中（请参阅错误行为的截图）。

enter image description here

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

谢谢

来源

2015-07-21 sineverba

添加text-center类的category-title

01父元素

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>

来源

2015-07-21 11:28:57

谢谢。有用。祝你今天愉快！ – sineverba

不错！：）祝你有美好的一天。 –

尝试text-center在DIV类。像下面的东西。

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

来源

2015-07-21 11:31:27

自2001年以来，align =“”属性被弃用... – EmmanuelB

但它仍然完成工作 –

是的，用手榴弹解锁门也行得通。这并不意味着它应该完成。现在用你的文本中心类更好。 :) – EmmanuelB

从官方网站引导尝试class="text-center"。 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>

来源

2015-07-21 11:37:07

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

回答

相关问题