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

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>