CSS文本对齐和格式问题

Question

我想在一个方框中垂直居中2行文字，但我有2个问题：

1. 减少主<p>（JOHN DOE）和<p><span>（在日本出生）之间的空白区域的“最干净”方法是什么？我可以使用<span>行的填充/边距，但我不相信这是最好的方法。是吗？

2. 无论绿框高度如何，垂直居中这两行文字的最佳方法是什么？

谢谢，

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：

.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 ....然后使用line-height和边距/填充重置。

我为视觉参考添加了边框....我还从span中取出了p，因为它是不必要的。

＆＃13;

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;