Question

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

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

Answer 1

听起来你需要CSS'line-height属性。这样，您可以使文本行的高度相同，但会单独影响font-size

#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                     */
}

Demo

Answer 2

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

我建议您阅读：http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

Answer 3

使用填充和边距调整文本的放置位置。但是对于这个设置，每个div的p类让你可以控制你想要在div中放置文本。当然，由于你的字体数量很多，你的填充因基线偏移会有所不同。小提琴http://jsfiddle.net/rnEjs/

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

Answer 4

我从Stackoverflow主题中找到了一个很好的答案：Why is vertical-align:text-top; not working in CSS。

它的要点如下：

了解块和内联元素之间的区别。块元素是<div>之类的内容，而内联元素是<p>或<span>之类的内容。
现在，vertical-align属性仅适用于内联元素。这就是垂直对齐不起作用的原因。
使用Chrome开发工具，您可以修改您的演示并看到它的工作原理：具体而言，在<div>标记内，将<span>标记放入适当的样式。

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

4 个答案: