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

使用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>

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

我想我看到小MI你正在談論的唾液。這是否更好 ？我對齊兩個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 4

您的問題看起來是文本的高度大於該圓的。 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; 
}