2

It's possible moving span text like using margin?

and provide the distance on the border so as not to touch?

i already use background-position but not working.

i want the span text in the center 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

2 Answers2

3

You can use the padding & line-height to make the text center. See this 

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>
jkythc
  • 420
  • 3
  • 12
0

just set the line-height of your span to the height of the span. In your case it would be: line-height: 34px;

additionally you can add some padding to the span to get some more space left and right: padding: 0 15px;

warch
  • 2,387
  • 2
  • 26
  • 43