Bootstrap panelindeki bir metnin konumunu, üstteki maksimum yükseklik ile nasıl ayarlayabilirim?

Question

Metni, maksimum yükseklik ayarını yaptığım bir panel gövdesinin içinde nasıl hareket ettireceğimi anlayamıyorum. Aşağıda benim html kod snippet'leri ve yaptığım geçersiz kılmalar var.

HTML:

<div class="row chatListRow"> 
     <div class="panel panel-default"> 
      <div class="panel-body userBox"> 
       <small>User 1</small> 
      </div> 
     </div> 
    </div> 

CSS: Ne yapmak istediğiniz metnin konumunu ayarlamak için

gibi:

.chatListRow{ 
    margin-bottom: -1.5em; 
    margin-top: -1em; 
} 

.userBox{ 
    max-height:1.5em; 
} 

Bu gibi görünüyor ne Metnin dikey olarak ortalanmasını sağlaması için biraz yukarı doğru hareket ettirin. Metnin küçük etiket içindeki konumunu nasıl ayarlayacağımı bilmiyorum. Bana yardım etmeye istekli olan herkese teşekkür ederim.

Ne yaptım userBox'ın dolgularını ayarlamaktı. Bana yardım ettiğin için Joseph Marikle için

Teşekkür:

.userBox { 
    max-height: 1.5em; 
    padding-bottom: 1.5em; 
    padding-left: 1em; 
    padding-top: 0.5em; 
} 

Ve bu şimdi benziyor nasıl!

Answer 1

Şey ... Daha çok, dolguyu yükseklikte hesaplanmasına zorlayan bir öğenin üzerinde bir yükseklik ayarladığınız gibi. 1.5em, varsayılan dolgu içerir. Bu sorunu, box-sizing ayarını content-box olarak ayarlayarak düzeltebilirsiniz. Varsayılan olarak, tüm öğeler twitter bootstrap'te border-box olarak ayarlanmıştır (bu, satıcı öneklerine atılmış litterally * { box-sizing: border-box; }). Yani, .userBox için content-box'a ayarlayın.

/* CSS used here will be applied after bootstrap.css */ 
 
body { 
 
    padding: 3em; 
 
} 
 

 
.chatListRow{ 
 
    margin-bottom: -1.5em; 
 
    margin-top: -1em; 
 
} 
 

 
.userBox{ 
 
    max-height:1.5em; 
 
    box-sizing: content-box; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
 
<div class="container"> 
 
    <div class="row chatListRow"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-body userBox"> 
 
     <small>User 1</small> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>