html - 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 和 margin/padding 重置。

我添加了边框以供视觉引用....我还从 p 中删除了 span，因为它是不必要的。

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