中心文本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％寬度

回答

相關問題