.center-Block mit zentrierten DIV in Bootstrap 3

Question

Ich habe Probleme mit der Zentrierung meiner div und center-block scheint nicht zu funktionieren. Ich beabsichtige, das geschachtelte div zu zentrieren, das das <p> Tag enthält. Ich versuche nicht so sehr, den Inhalt innerhalb des div zu zentrieren. Daher möchte ich, dass die zentrale Eigenschaft auf das div selbst und nicht auf seinen Inhalt angewendet wird.

<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; 
} 

Die Seite muss mobil reagieren so Bootstrap des Offset könnte Probleme verursachen.

Jeder Rat würde sehr geschätzt werden.

Mike

Answer 1

Sie können keine col-xs-12 zentrieren. Es ist fast 100% der verfügbaren Breite plus einige Ränder. Es ist einfach nirgendwo hin zu gehen. Wenn Sie die Inhalte der Mitte-Block erscheinen zentriert wollen, das ist, was ich gehe davon aus, dies tun:

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

Und Sie möchten vielleicht auch diese Klasse aus der Reihe entfernen.