The text is not meticulously arranged within the designated span

My text-align (center) property doesn't seem to be working correctly with the following code snippet:

<span class="info">&nbsp;i&nbsp;<span id="uitleg_itje">Bla bla. 
</span></span>

The CSS for the info class is as follows:

.info {
  font-weight: bold;
  text-align: center;
  background-color: #C73C3C;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-transform: lowercase;
  letter-spacing: 4px;
  color: #ffffff;
  cursor: pointer;
  font-size: 21px;
}

However, the current output appears like this:

htmlcss

Answer №1

One possible reason for this issue may be attributed to the use of letter-spacing: 4px;. Instead of relying on this property and &nbsp;, it could be beneficial to consider utilizing padding as an alternative.

.info {
  font-weight: bold;
  text-align: center;
  background-color: #C73C3C;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-transform: lowercase;
  /*letter-spacing: 4px;*/
  padding: 0 20px;
  color: #ffffff;
  cursor: pointer;
  font-size: 21px;
}
<span class="info">i</span>

Answer №2

To align text in the center, place the div above the span tag.

 .info {
  font-weight: bold;
  text-align: center;
  background-color: #C73C3C;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-transform: lowercase;
  letter-spacing: 4px;
  color: #ffffff;
  cursor: pointer;
  font-size: 21px;
}

div{
text-align:center;
}
 <div>
 <span class="info">&nbsp;i&nbsp;<span id="uitleg_itje">Bla bla. 
 </span></span>
</div>

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

"Utilizing FileReader to seamlessly integrate data into FormData without the risk

Currently, I'm in the process of constructing an ajax file uploader. This is made possible thanks to the recently introduced FormData interface. Everything seems to work as expected when using the original file. However, I encounter issues when conver ...

javascriptajaxhtml

What is the best approach to display a fluctuating price depending on specific options chosen in Next.js?

When working with 2 different select tags and rendering images based on the selection, I also want to display a price determined by the options chosen. For instance, selecting "Your Current Division" as Iron and "Your Desire League" as Bronze/Silver/Gold s ...

javascripthtmlcssreactjsnext.js

Best practices for arranging several divs with CSS

I am in the process of creating a main header for several web pages I'm working on. The layout I have in mind includes an image, centered text below the image (all to the left of the main header), a main header that I want to be in the center of the p ...

htmlcssstyles

Combining HTML, CSS, JAVASCRIPT, and PHP for a seamless web development experience

As a beginner in web development, I have some knowledge of javascript, html, css and am currently delving into php. However, I am struggling to find comprehensive resources that show how to integrate all these languages together. I would greatly appreciat ...

phpjavascripthtmlcss

A Complication Arises with Browser Functionality When Embedding an Iframe within

I am experiencing a peculiar problem while embedding an iframe with a specific src inside an absolutely positioned div. Here's the basic structure of the webpage: .container { position: relative; overflow: hidden; width: 100%; heigh ...

javascripthtmlcssiframecross-domain

Dynamic properties in JQuery

Here is the HTML DOM element I have... <input type="text" style="width: 200px;" id="input1"/> I want to make sure it stores date values. How can I specify that in the DOM element? Please provide your suggestions. Thanks! ...

javascriptjqueryhtml

CSS resetting can lead to tables appearing misaligned

After applying a CSS reset to my website's stylesheet (which is valid as CSS 2.0 and used with XHTML 1.0 transitional webpage), I noticed that a table on my website no longer looks correct. Specifically, the table is now positioned incorrectly and the ...

htmlcssxhtmlcss-tables

Having an issue with displaying the country name and country code in a table using the Angular7 custom pipe

country code: "ab", "aa", "fr", ... I need to create a custom pipe that will convert a countryCode into a countryName, such as: "ab" → "Abkhazian", "ch" → "Chinese", "fr" ...

javascripthtmlangulartypescript

What is the best way to incorporate padding that scales with the browser's width while centering content using `display: table;`?

^As mentioned in the title^. I am looking to adjust padding based on the width of a browser. My attempt so far has been: html, body{ height: 100%; } body{ display: table; margin: 0 auto; } #center{ display: table-cell; vertical-align: middle ...

htmlcsscentering

The jsPdf library performs well on medium-sized screens like laptops, but when downloaded from larger monitor screens, the PDF files do not appear properly aligned

In the code snippet below, I am using html2canvas to convert HTML to PDF. The PDF download works fine on medium screens, but when viewed on larger screens, some pages appear blank and the content order gets shuffled. How can I resolve this issue so that th ...

htmljqueryangularjspdfhtml2canvas

Automatically populate select boxes with values from a different source using PHP

I'm in the process of setting up automatic population for 2 select boxes on a website. When a user chooses a class, the second select box automatically displays the main specialization of that class. If the user selects Tank (for example), the third ...

javascripthtml

Combining text and images in XSLT using CSS: A comprehensive guide

Greetings! I am facing a situation where I have an XML file containing image tags like this: <pb facs="ciao.jpg">. Additionally, I have an XSL file that includes a JavaScript snippet as shown below: <script type="text/javascript> function ...

cssimagetext

What strategies should be employed to manage data-driven input in this particular scenario?

In the process of creating a small webpage, I have designed 2 navigation panels - one on the left and one on the right. The leftNav panel contains a list of different flower names. While the rightNav panel displays images corresponding to each flower. A ...

javascriptjqueryhtmlcssjson

Creating a dynamic nested list in HTML using JavaScript with data retrieved from a JSON source

I'm trying to generate a dynamic nested ul\li list from a JSON array. IMPORTANT! While I can use jQuery for this transformation, it's in a node.js environment where DOM access is restricted and I must work with a string. The depth of the a ...

javascripthtmlarraysjsonnode.js

Utilizing Javascript for altering HTML elements

It seems this issue is quite puzzling and I believe another perspective could be beneficial in identifying the problem. Despite my efforts, I am unable to understand why the "Energy Calculator" does not return a value when submitted, whereas the "Battery C ...

javascripthtmlinnerhtmlgetelementbyid

Emphasize hyperlink according to the current page (Dynamic Navigation using PHP)

While some may find this task simple, I have been struggling to make it work despite trying various methods. Let me give you a brief overview; I have a single page with links that, when clicked, load other pages but display them within the same page. ...

phphtmlcss

Utilizing an Image as a Link in the Background

I am working on a way to convert the CSS background image I have into a clickable link that can be referenced. Here is my CSS code: #wrapper { height: 100%; padding: 66px; } #ad_11 { background-image: url(images/index1.png); display: block; text-indent: ...

htmlcss

When combining Symfony, Twig, and Semantic UI, users may encounter an issue where the background image fails to display

Can someone assist me in identifying the issue with my code? I am using Symfony 2.8, Semantic UI, and Twig, attempting to set a background image on my site. The modification is being made to my base.html.twig file. I have attempted: Using different ima ...

htmlcsssymfonytwigbackground-image

What is the best way to establish a maximum limit for a counter within an onclick event?

I'm struggling to figure out how to set a maximum limit for a counter in my onclick event. Can someone help me? What is the best way to add a max limit to the counter of an onclick event? Do I need to use an if statement? If yes, how should it be w ...

javascripthtml

Other elements are unable to conceal Material UI InputBase

Displayed below is a navigation bar that sticks to the top, followed by rows of InputBase components from material-ui. Despite setting the background color of the nav bar to white, the input always appears above the nav. This strange behavior stopped when ...

javascripthtmlcssreactjsmaterial-ui