Guide to centering span text on a background

Is it possible to move span text by adjusting the margin?

How can I provide distance from the border so that it doesn't touch?

I tried using background-position but it didn't work.

I want the span text centered with a black background color.

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

htmlcss

Answer №1

To center the text, you can utilize padding and line-height. Take a look here:

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

To ensure proper spacing, adjust the line-height of your span to match its height. For example: line-height: 34px;

For additional padding on the sides of the span, consider adding: padding: 0 15px;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The performance of the animation on http://responsive-nav.com/ becomes erratic when viewed on Android devices

Recently, I came across a fantastic plugin that works perfectly on regular computer browsers. However, when I tested it on my android phone, the css3 animation for the dropdown appeared choppy and seemed to be dropping frames. Does anyone have suggestions ...

javascriptcssplugins

combining class and ng-class for enhanced style control

Encountering an issue when combining regular element class and ng-class in my code. The css property of ng-class depends on a controller variable that changes for each iteration in ng-repeat. The problem arises when the 'dependent' variable has t ...

htmlangularjsangularjs-ng-repeatng-class

I am looking to achieve a hover effect with CSS that blurs an element upon hovering

I need help fixing the blur effect on my button. When I hover over it, the button becomes blurred even though I don't want that. I tried adjusting the z-index values but it didn't work. There seems to be an error in the snippet where I want only ...

htmlcss

Issue with React Material UI: Box is not scrollable vertically

I've been grappling with this issue for hours and could really use some assistance. My goal is to create a Chat component that allows vertical scrolling, but I've hit a roadblock. Here's a simplified version of the problem on Codesandbox: ht ...

cssreactjsmaterial-ui

Using Javascript and jQuery, populate a dropdown menu with options that are extracted from a different dropdown menu

These are my two <select> elements: <select class="js-select-1"> <option disabled>Starting point</option> <option>A</option> <option>B</option> <option>C</option> <option>D</op ...

javascriptjqueryhtmlarraysselect

Difficulty Uploading Files

I'm facing an issue when trying to upload multiple files. When I select more than 1 djz_file, no information is obtained from $_POST and $_FILES. However, if it's a single file, everything works as expected. <fieldset> ...

phphtmlfile-upload

Unable to add a logo to the header in react-material kit

I am in the process of trying to incorporate my logo into the top header section of the page, but I am facing some challenges with the code provided. import React from "react"; import classNames from "classnames"; import PropTypes from "prop-types" ...

cssreactjsmaterial-ui

Removing focus in Meterial-UI [Select] component when clicked outside: Techniques and solutions

Looking to create a simple multiple select feature with Material-UI's Select component. One issue I have encountered is that when deselecting an option or clicking outside the dropdown, the label remains focused until clicked on again or another compo ...

javascripthtmlcssreactjsmaterial-ui

What is the preferred choice: using camelCase in CSS with Styled Components or Emotion for standard React development?

When I'm coding with React Native, I use the styled properties that follow most of CSS syntax and are formatted in camel case. For instance: //... <Component style={styles.container} /> //... const styles = StyleSheet.Create({ ...

cssreactjsstyled-componentsemotion

Searching and replacing query strings in a URL using JQuery according to the chosen option in an HTML dropdown menu

Is there a way to use jQuery to dynamically change a specific value in the query string by finding and replacing that value based on the selection made from a dropdown menu on the webpage? For example: Imagine we have this query string on the current page ...

javascriptjqueryhtmlsharepoint

The functionality of Django pagination is experiencing issues when utilizing the POST method within a Search form

I've been working on a search feature within a form that uses the POST method and successfully retrieves results. However, when implementing Django pagination, I encountered an issue where the results only show up on the first page. When attempting to ...

htmldjangopostdjango-pagination

D3 curved path with no circular shape

I'm trying to figure out how to create SVG arcs in HTML using d3js v3 that are not perfectly circular. The issue I'm facing is that the arcs I'm able to make end up looking like distorted circles instead of true non-circular arcs, resulting ...

javascripthtmld3.jssvg

Use jQuery to target videos within a div and set them to mute

Looking for a way to mute videos using jquery when a certain button is clicked. This is the HTML code I'm working with: <button id="mute">Mute all</button> <button id="unmute">Unmute all</button> <div id="displayer">&l ...

javascriptjqueryhtmlhtml5-video

What is the best way to conceal HTML5 dividers if there is a custom attribute present on at least 1 selected item?

In my HTML form, I have multiple checkboxes and I want to hide certain dividers only if at least one checked checkbox has a custom HTML5 attribute called "terminator". Otherwise, I want to display the dividers. To achieve this, I attempted to use the chan ...

javascriptjqueryhtmlshow-hide

Safari Browser HTML CSS Problem

I encountered a strange issue with my website navigation. In Chrome, it appears like this: https://i.sstatic.net/Y2pfF.png However, in Safari, it looks like this: https://i.sstatic.net/YhlDU.png Here is the code I'm using: #header{ display: gr ...

javascripthtmlcss

Notification that variables will output either "length" or "item"

I have a 16x16 table and I am assigning a lambda function to all the td elements like this: function handlerAssignment() { var trs = document.getElementsByTagName("tr"); var tds; for (var i=0; i<trs.length; i++) { tds = trs[i].getE ...

javascripthtmldomlambda

What is the process for modifying the text in a browser's URL bar using JavaScript?

Is it possible to use JavaScript to set some text in the web browser's URL box when a button on an HTML page is clicked? For example, setting the text to "www.google.com". ...

javascripthtml

Is it possible to insert an image directly into the <img> tag without having to first send it to the server?

I've created an upload form that allows users to submit images: <form> <input accept="image/jpeg, image/gif, image/png" type="file" name="image" id="image" class="UploadInput" onchange="submitImageUploaderForm()"/> </form> Once t ...

javascripthtmlajaxjquery

What is the best way to add a numbered alert to a button using HTML5, jQuery, PHP, or JavaScript?

I have a button on my HTML page that directs users to a page containing email features. I'm looking for a way to show users the number of unread messages they have before they click on the button to view them. I want this to be a subtle alert without ...

phpjavascriptjqueryhtml

Resetting the file input in ReactJS can be easily accomplished by setting

My upload input field: <input onChange={this.uploadFile} id="fileUpload" type="file" className="upload"/> This is how I handle the uploads: uploadFile(e) { e.preventDefault(); let reader = new FileReader(); let file = e.target.files[0] ...

htmlreactjsfile-upload