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

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>