html - 文本在 css 中稍微不对齐？

Question

我正在构建我的投资组合网站，我有 4 个单独的框，其中包含我可以做的 4 项不同的事情(插图、视频编辑等)，并在下方使用 <small>标签我将有一个简短的描述。这是它目前的样子 Example

如您所见<small>文本在背景颜色框之外并且未正确对齐(即我希望框随文本一起增长，对齐并居中)，其中一个框比其余框长。这是我的 html；

<div id="price-timeline">
                                <div class="price">
                                    <h4>Animation<small>short description here</small></h4>

                                </div> <!-- price -->

                                <div class="price">
                                    <h4>Illustration<small>short description here</small></h4>


                                </div> <!-- price -->

                                <div class="price">
                                    <h4>Video Editing<small>short description here</small></h4>

                                </div> <!-- price -->

                                <div class="price">
                                    <h4>Storyboarding<small>short description here</small></h4>

                                </div> <!-- price -->


                            </div> <!-- price timeline -->

这是我的 CSS；

#price-timeline 
    {
        margin: 25px 0 60px; /* top, side, bottom */
        text-align: center;
    }

    #price-timeline .price {
        display: inline-block;
        width: 20%; /* stack against eachother; */
        margin: 0 2% 0 0;
        background: #f8f8f8;
        padding: 10px 20px 40px;
        position: relative;
        vertical-align: top;
    }

#price-timeline h4 {
    margin: 0 0 10px;
}

为了使文本对齐，我在这里缺少什么？

谢谢!

Answer 1

或者你可以设置内边距

#price-timeline {
  margin: 25px 0 60px;
  /* top, side, bottom */
  text-align: center;
}

#price-timeline .price {
  display: inline-block;
  padding: 50px; /* added */
  /* stack against each other; */
  margin: 0 2% 0 0;
  background: #f8f8f8;
  padding: 10px 20px 40px;
  position: relative;
  vertical-align: top;
}

#price-timeline h4 {
  margin: 0 0 10px;
}

/* Put the <small> below the <hr> */
#price-timeline small {
  margin-top: 5px;
  display: block;
}

<div id="price-timeline">
  <div class="price">
    <h4>Animation<small>short description here</small></h4>

  </div>
  <!-- price -->

  <div class="price">
    <h4>Illustration<small>short description here</small></h4>


  </div>
  <!-- price -->

  <div class="price">
    <h4>Video Editing<small>short description here</small></h4>

  </div>
  <!-- price -->

  <div class="price">
    <h4>Storyboarding<small>short description here</small></h4>

  </div>
  <!-- price -->


</div>
<!-- price timeline -->