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

Question

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

Answer 1

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> 

Answer 2

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;

Answer 3

You can also use flex (with justify-content and align-items ) and some padding like this :

 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>