如何在中心背景中制作跨度文本

Question

是否有可能像使用邊距那樣移動跨度文本？

並在邊框上提供距離以免碰觸？

我已經使用background-position但無法正常工作。

我想要中心background black的跨度文本

 div { color: white; } span { border-radius: 20px; position: fixed; margin-left: 8px; margin-top: 8px; background: black; height: 34px; width: max-content; border-radius: -2px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> <div> <span> <i class="fa fa-folder-open" aria-hidden="true"></i> <i class="fa fa-lg fa-angle-right" style="margin-left:7px;"></i> My Folder</span> </div> 

的jsfiddle

Answer 1

您可以使用padding和line-height使文本居中。 看到這個

 div { color: white; } span { border-radius: 20px; position: fixed; margin-left: 8px; margin-top: 8px; background: black; height: 34px; width: max-content; line-height: 32px; padding: 0 15px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> <div> <span> <i class="fa fa-folder-open" aria-hidden="true"></i> <i class="fa fa-lg fa-angle-right" style="margin-left:7px;"></i> My Folder</span> </div> 

Answer 2

只需將跨度的line-height設置為跨度的高度即可。 在您的情況下，應為： line-height: 34px;

另外，您可以在跨度上添加一些填充以左右留出更多空間： padding: 0 15px;

Answer 3

您還可以使用flex（帶有justify-content和align-items ）和一些填充，如下所示：

 div { color: white; } span { border-radius: 20px; position: fixed; margin-left: 8px; margin-top: 8px; background: black; height: 34px; width: max-content; border-radius: -2px; /*code addedd*/ display:inline-flex; padding:0 10px; justify-content:center; align-items:center; /**/ } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" /> <div> <span> <i class="fa fa-folder-open" aria-hidden="true"></i> <i class="fa fa-lg fa-angle-right" style="margin-left:7px;"></i> My Folder</span> </div>