如何使文本垂直對齊頂部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>