Html 在不同的div中对齐不同大小的文本

我想了解在不同的div类之间对齐不同大小类型的正确方法。现在，代码强制较小的类型与较大类型的顶部对齐。如何将同一排版基线上的所有div的类型与最干净的代码对齐。这看起来很简单，但我找不到答案

我还希望这在语义上是正确的（我正在尝试创建一行响应性强的数据，可以在不同的设备上调整大小和重新排列（浮动））。欢迎所有建议

听起来你需要CSS的属性。这样，您可以使文本行具有相同的高度，但单独影响

#artist { /* Selector to affect all the elements you want */
    color: #000;
    font-size: 18px; /* Default font size */
    line-height:18px; /* Line height of largest font-size you have so none go */
                      /* above the top of their container                     */
} 

---

您需要调整每种字体大小的行高和垂直边距，以便与基线网格匹配

---

我建议阅读以下内容：

调整文本的放置位置是通过填充和边距来完成的。但是对于这个设置，每个div都有一个p类，可以控制文本在div中的位置。当然，由于字体有多个em大小，所以填充将随基线移动而变化。拨弄

#艺术家{
填充物：5px；
浮动：左；
宽度：100%；
背景色：#036；
颜色：#000；
字号：18px；
溢出：隐藏；
}
.体裁{
宽度：5em；
浮动：左；
高度：50px；
背景色：#09F；
}
.体裁p{
填充物：5px 5px；
}
.艺人姓名{
浮动：左；
宽度：175px；
高度：50px；
背景色：#F39；
}
.艺人姓名p{
填充物：5px 5px；
}
.出生{
浮动：左；
宽度：5em；
高度：50px；
字体大小：12px；
背景色：#F90；
}
.出生p{
填充：15px 5px；
}
.中等{
浮动：左；
宽度：10em；
高度：50px；
字体大小：12px；
背景色：#099；
}
.p.中等{
填充：15px 5px；
}
.画廊{
浮动：左；
宽度：10em；
高度：50px；
字体大小：12px；
背景色：#FF6；
}
.画廊p{
填充：15px 5px；
}
.网站{
浮动：左；
宽度：10em；
高度：50px；
字体大小：12px；
背景色：#99F；
}
.网站p{
填充：15px 5px；
}
体裁

艺术家最后一名

出生年份

中等

画廊名称

网站

我从这个Stackoverflow线程中找到了一个很好的答案：

其要点如下：

• 理解块元素和内联元素之间的区别。块元素类似于
  ，而内联元素类似于
  或

• 现在，

  vertical align

  属性仅用于内联元素。这就是垂直对齐不起作用的原因
• 使用Chrome开发工具，您可以修改您的演示并查看它是否有效：具体来说，在
  标记中，使用适当的样式放置
  标记

---

请在此处添加相关代码欢迎来到stackoverflow，请始终将相关代码添加到您的问题中，并查看一些关于答案的反馈，这将是一件令人高兴的事情，我们想知道我们是否帮助了您这非常有帮助。谢谢杰夫为我指明了正确的方向。从引用的文章中，CSS行高度属性没有一个固有的基线概念，并且每一行文本都大致放在元素的总高度的中间。这意味着完全对齐文本的实际基点（即基线）。跨越不同的样式和字体需要进一步的手动、耗时的调整和像素微调！不幸的是，有时候这只能归结为反复试验。祝你好运

 #artist {

     padding: 5px;

     float: left;

     width: 100%;

     background-color: #036;

     color: #000;

     font-size: 18px;

     overflow: hidden;

 }

 .genre {

     width: 5em;

     float:left;

     height: 50px;

     background-color: #09F;

 }

 .genre p {

     padding:5px 5px;

 }

 .artistName {

     float: left;

     width: 175px;

     height: 50px;

     background-color: #F39;

 }

 .artistName p {

      padding:5px 5px;

 }

 .birth {

     float: left;

     width: 5em;

     height: 50px;

     font-size: 12px;

     background-color: #F90;

 }

 .birth p {

     padding:15px 5px;

 }

 .medium {

     float: left;

     width: 10em;

     height: 50px;

     font-size: 12px;

     background-color: #099;

 }

 .medium p {

      padding:15px 5px;

 }

 .gallery {

     float: left;

     width: 10em;

     height: 50px;

     font-size: 12px;

     background-color: #FF6;

 }

 .gallery p {

    padding:15px 5px;

 }

 .website {

     float: left;

     width: 10em;

     height: 50px;

     font-size: 12px;

     background-color: #99F;

 }

 .website p {

      padding:15px 5px;

 }


<div id="artist">
    <div class="genre">
        <p>Genre</p>
    </div>
    <div class="artistName">
        <p>Artist First Last</p>
    </div>
    <div class="birth">
        <p>birth year</p>
    </div>
    <div class="medium">
        <p>medium</p>
    </div>
    <div class="gallery">
        <p>gallery name</p>
    </div>
    <div class="website">
        <p>website</p>
    </div>
</div>