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>
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>
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;
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.