CSS metin hizalama ve biçimlendirme

Question

Ben bir kutu içinde metnin dikey 2 hatlarını ortalamak istiyorum sorunları, ama 2 soru var:

1. arasındaki boşluğu azaltmak için "en temiz" yolu nedir

   ana <p> (JOHN DOE) ve <p><span> (Japonya'da doğmuştur). <span> hattının dolgusu/marjı ile oynayabilirim ama bunun en iyi yaklaşım olduğuna inanmıyorum. Bu mu?

2. Bu 2 satır metnin dikey olarak yeşil kutunun yüksekliği ne olursa olsun ortalanmasının en iyi yolu nedir?

sayesinde

https://jsfiddle.net/qa6yzbk7/

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4 intro-boxes white-smoke"> 
      <p>Colum 1</p> 
     </div> 
     <div class="col-md-4 intro-boxes apple"> 
      <p>John Doe</p> 
      <p><span>Born in Japan</span></p> 
     </div> 
     <div class="col-md-4 intro-boxes chateau-green"> 
      <p>Jane Doe</p> 
      <p><span>Born in France</span></p> 
     </div> 
    </div> 
</div> 

CSS: o zaman .... merkezlemekullanmak için

.chateau-green { 
    background: #469551; 
} 

.apple { 
    background: #6FB34F; 
} 

.white-smoke { 
    background: #F5F5F5; 
} 

.red { 
    background: red; 
} 

.green { 
    background: green; 
} 

.height-350px { 
    height: 350px; 
    background-image: url(http://placehold.it/1350x450/E1E9EC); 
    background-position: center center; 
} 

.intro-boxes { 
    height: 140px; 
    margin-bottom: 30px; 
} 

.intro-boxes p { 
    font-size: 36px; 
    color: #fff; 
    text-align: center; 
    text-transform: uppercase; 
} 

.intro-boxes p span { 
    font-size: 18px; 
    color: #fff; 
    text-align: center; 
text-transform: lowercase; 

} 

Answer 1

flexbox'ave kenar boşluğu/dolgu sıfırlamaları.

Görsel referans için kenarlıklar ekledim .... span'u p'dan gereksiz olarak aldım.

.apple { 
 
    background: #6FB34F; 
 
    display: flex; 
 
flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 

 
} 
 

 
.intro-boxes { 
 
    height: 140px; 
 
    margin-bottom: 30px; 
 

 
} 
 

 
.intro-boxes p { 
 
    font-size: 36px; 
 
    border: 1px solid grey; 
 
    color: #fff; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 1; 
 

 
} 
 

 
.intro-boxes span { 
 
    font-size: 18px; 
 
    border: 1px solid grey; 
 
    text-transform: lowercase; 
 
    color: white; 
 

 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="col-md-4 intro-boxes apple"> 
 
     <p>John Doe</p> 
 
     <span>Born in Japan</span> 
 
    </div> 
 

 
    </div> 
 
</div>