.Travralı orta sınıf DIV ile merkezde 3

Question

Divamı ortalamıyorum ve center-block çalışmıyor gibi görünüyor. <p> etiketini içeren iç içe geçmiş div'i ortalamayı planlıyorum. İçeriği div içinde ortalamaya çalışmıyorum. Bu şekilde, merkezin mülkiyeti, içerikten ziyade div'in kendisine başvurmak isterim. Bootstrap adlı sorunlara neden olabilecek ofset böylece

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

sayfa mobil duyarlı olmalıdır.

Herhangi bir öneri çok takdir edilecektir.

Mike

Answer 1

Bir col-xs-12 ortalamak olamaz. Mevcut genişliğin% 100'üne ve bazı kenar boşluklarına yakın. Sadece gidecek hiçbir yeri yok. Eğer merkez bloğun içeriği I varsayarak budur, ortalanmış olarak isterseniz, bunu:

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

Ve ayrıca satırdan bu sınıfı kaldırmak isteyebilirsiniz.