Question

可能使用保证金移动跨度文本？

并提供边框上的距离以免触碰？

我已经使用background-position但没有工作。

我希望范围文本位于中心background black

＆＃13;

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;
}

＆＃13;

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

＆＃13;

JSFiddle

Answer 1

您可以使用padding＆amp; line-height使文字成为中心。见这个

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

只需将跨度的line-height设置为跨度的高度即可。在您的情况下，它将是：line-height: 34px;

另外，你可以在跨度上添加一些填充以获得更多的左右空间：padding: 0 15px;

Answer 3

你也可以使用flex（justify-content和align-items）和一些填充：

＆＃13;

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;
  /**/
}

＆＃13;

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

＆＃13;

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

3 个答案: