如何将文本垂直对齐顶部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>

Fiddle Link

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

使用以下解决方案：

＆＃13;

＆＃13;

webpack-hook

＆＃13;

Stream<String> streamA = Stream.concat(
      Stream.generate(item::getStringA),
      Stream.generate(item::getStringB))

return Stream.concat(streamA, item.getStringList(param).stream())

＆＃13;

＆＃13;

＆＃13;

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>