ブートストラップ3に中央DIVの中心ブロック

Question

私のdivを中心にトラブルがあるようで、center-blockは動作していないようです。 <p>タグを含むネストされたdivを中央に配置するつもりです。私はdivの中にコンテンツを集中させることはあまりありません。そのようなものとして、私はその中心のperopertyをその内容ではなくdiv自体に適用したいと思っています。ブートストラップのは、問題が発生する可能性がありますオフセットので

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 center-block"> 
      <h1>{{secretDisplay.secretTitle}}</h1> 
       <div class="row center-block" style="text-align:left"> 
        <div class="col-xs-12 center-block" style="text-align:left"> 
         <p contenteditable="true" class="chat_window"> 
          <img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/><img src="{% static 'img/Test1.jpg'%}" class="icon_one"/> 
         </p> 
        </div> 
       </div> 
       <div> 
        <p contenteditable="true" class="write_window">This is the test</p> 
       </div> 
     </div> 
    </div> 
</div> 

CSS

.center-block { 
    float: none; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

ページはモバイル対応しなければなりません。

アドバイスをいただければ幸いです。

マイク

Answer 1

col-xs-12をセンターに配置することはできません。これは利用可能な幅の100％近くにいくつかのマージンを加えたものです。それは単にどこにも行かない。あなたは中央ブロックの内容は、私が仮定している何である、中央に表示したい場合は、次の操作を行います。

.center-block { 
    text-align: center; 
} 

そして、あなたはまた、行からこのクラスを削除する場合があります。