如何使文本垂直对齐顶部CSS

Question

我正在尝试使用CSS在垂直方向上对齐文本，但是右侧跨度中存在某种空间。

添加了代码和小提琴链接。

 p{ clear: both; margin: 0; padding: 0; display: table; } span.blue{ background: blue; } span.green{ background: green; } span.black{ background: black; } span.circle{ width: 15px; height: 15px; -webkit-border-radius: 15px; border-radius: 15px; display: inline-block; margin-right: 12px; /* float: left; */ vertical-align: top; } span.desc{ /* float: left; */ width: 115px; vertical-align: top; display: inline-block; } 

 <div class="container"> <p> <span class="blue circle"></span> <span class="desc">Blue text</span> </p> <p> <span class="green circle"></span> <span class="desc">Green text</span> </p> <p> <span class="black circle"></span> <span class="desc">black text</span> </p> </div> 

小提琴链接

Answer 1

我想我看到了您所说的微小偏差。 这是否更好 ？ 我使用对齐了cirlce和文本

vertical-align: middle;

代替

vertical-align: top;

编辑

由于vertical-align: top必须保留，因此我在圆圈中添加了margin-top: 2px 。 这会将它们放置在与文本相同的高度，并且两者仍在顶部对齐。

 p{ clear: both; margin: 0; padding: 0; display: table; } span.blue{ background: blue; } span.green{ background: green; } span.black{ background: black; } span.circle{ width: 15px; height: 15px; -webkit-border-radius: 15px; border-radius: 15px; display: inline-block; margin-right: 12px; /* float: left; */ vertical-align: top; margin-top: 2px; } span.desc{ /* float: left; */ width: 115px; vertical-align: top; display: inline-block; } 

 <div class="container"> <p> <span class="blue circle"></span> <span class="desc">Blue text</span> </p> <p> <span class="green circle"></span> <span class="desc">Green text</span> </p> <p> <span class="black circle"></span> <span class="desc">black text</span> </p> </div> 

Answer 2

使用以下解决方案：

 p{ clear: both; margin: 0; padding: 0; display:block; } span.blue{ background: blue; } span.green{ background: green; } span.black{ background: black; } span.circle{ display:inline-block; width: 15px; height: 15px; -webkit-border-radius: 15px; border-radius: 15px; vertical-align:middle; } span.desc{ display:inline-block; width: 115px; vertical-align:middle; } 

 <div class="container"> <p> <span class="blue circle"></span> <span class="desc">Blue text</span> </p> <p> <span class="green circle"></span> <span class="desc">Green text</span> </p> <p> <span class="black circle"></span> <span class="desc">black text</span> </p> </div> 

Answer 3

您的问题似乎是文本的高度大于圆圈的高度。 Flexbox可以帮助解决此问题，使p显示变柔和设置圆以使其居中对齐。

p{
    clear: both;
    margin: 0;
    padding: 0;
    display: flex;
}
span.blue{
  background: blue;
}
span.green{
  background: green;
}
span.black{
  background: black;
}
span.circle{
  align-self:center;
      width: 15px;
    height: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    display: inline-block;
    margin-right: 12px;
    /* float: left; */
    vertical-align: top;
}
span.desc{
      /* float: left; */
    width: 115px;
    vertical-align: top;
    display: inline-block;
}

Answer 4

使用vertical-align: middle ，也可以使用相同的line-height和font-size来解决此问题，如下面的代码片段所示。

p span {
    font-size: 16px;
    line-height: 16px;
}

说明：

保持相同的line-height和font-size将确保vertical-align: top可以正常工作。

下面的代码段：

 p{ clear: both; margin: 0; padding: 0; display: table; } span.blue{ background: blue; } span.green{ background: green; } span.black{ background: black; } span.circle{ width: 15px; height: 15px; -webkit-border-radius: 15px; border-radius: 15px; display: inline-block; margin-right: 12px; /* float: left; */ vertical-align: top; } span.desc{ /* float: left; */ width: 115px; vertical-align: top; display: inline-block; } p span { font-size: 16px; line-height: 16px; } 

 <div class="container"> <p> <span class="blue circle"></span> <span class="desc">Blue text</span> </p> <p> <span class="green circle"></span> <span class="desc">Green text</span> </p> <p> <span class="black circle"></span> <span class="desc">black text</span> </p> </div>