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:

https://i.sstatic.net/sOitl.png

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

Make sure the inputs in separate table data cells are lined up in

I need help aligning two input fields in separate td elements to be on the same line. The issue I am encountering is that when an input is added to a td, it covers up any text within the td. https://i.stack.imgur.com/c7GiQ.png There are two scenarios: I ...

javascripthtmljquerycss

Set the text above the image in HTML and center align it

Hey everyone, I'm new to the world of HTML and CSS. Currently, I am working on designing some text above and centering an image. Additionally, I want the text to automatically wrap if the image is too long. Thank you for your help! Below is the code I ...

htmlcss

Struggling to send an object through a node route for rendering a page?

Currently tackling a node.js project using express.js. I have a route that renders an ejs page and passes along the team object. Strangely, when I try to access <%= team.member.name %>, it returns as undefined despite the information being present. A ...

javascripthtmlnode.jsexpressejs

Unique background image for every individual page

For my mobile app development using Jquery Mobile, I have implemented a custom theme but now want to vary the background images for different sections. My current code looks like this: .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { ...

jqueryhtmlcssjquery-mobilebackground-image

impact on the shape of the region's map

Is it possible to add an effect like a border or opacity when hovering over an area in an image map? I've tried using classes and applying hover effects with borders or opacity, but nothing seems to work as expected. Here's my code: <img src= ...

htmlcssdictionary

Dynamic navigation menu shifting when bolded

Looking at my menu, you'll notice the following layout: If one clicks on Recruitment in the menu, it correctly bolds the text as intended. However, an issue arises where the entire menu unexpectedly shifts 1 or 2px to the left. The menu is implemente ...

xhtmlmenudotnetnukecss

Dimensions of HTML Container on Google Website

I'm attempting to incorporate a collapsible table using HTML Box in a Google site. The code for the collapsible table can be found at http://tutorials.seowebpower.com/google-sites-advanced/collapsible-table. Here is the code: <html> <head> ...

javascripthtmlcssgoogle-sites

Slider UI handle in jQuery sliding out of the div container

Could you assist me with a technical issue I am facing? I need to know how and where to prevent the .ui-slider-handle from exceeding the div when it reaches 100%. Feel free to check out the live preview at https://codepen.io/Melwee/pen/Exjwoyo I have inc ...

jquerycssjquery-ui

Ways to make the Bootstrap form's fields align horizontally

I've exhausted all options, but I just can't seem to get the fields aligned horizontally. <form class="form-horizontal" role="form"> <div class="form-inline"> <div class="form-group"> <label for="acctName ...

htmlcsstwitter-bootstrap

Although the Flexbox is configured with 0 gap and margin, there remains a slight space between rows

I am currently attempting to utilize a flexbox in order to display several 600x300 images, however, I am encountering an unexpected small gap between the rows despite specifying a 0 gap and margin. Here is a screenshot for reference: .gallery { display: ...

htmlcss

Regular expression to identify items containing `href=""` within a specific set of tags

After using a Regex pattern to check for every href="" in my document, I now want it to specifically target all hrefs located between <a and </a> tags while still allowing other parameters within. Do not include in the match: <base href="http ...

phphtmlregex

javascript for each and every textarea

I am looking to apply my JavaScript code to all the Textarea elements on my page. $_PAGE->addJSOnLoad(" $('.textarea').each(function() { $(this).keyup(function() { var characterCount = $(this).val().length; var mes ...

javascriptphpjqueryhtml

Tips for entering text into the redactor editor with selenium IDE

The redactor editor's HTML structure is as follows: <div class="redactor_text redactor_optional redactor_editor" contenteditable="true" dir="ltr" style="height: 373px;"> <p>dummy text​</p> //This is where the text inputted into ...

htmlseleniumide

Excessive gap located above the section element

On the web page I'm practicing with, I've noticed an unwanted space at the top of the "Favorite Food" section. To center my unordered list, I made the "section" elements inline-block, but this created the issue. How can I remove that space at the ...

htmlcss

Define the dimensions of the container div that houses the SVG text element

<div id="maindiv" style="height:60px;width:100px;border:1px solid black;float:left"> <svg width="100%" height="20"> <text x="28" y="18" style="text-anchor: start">somedynamictext</text> </svg> </div> Is ther ...

htmltextsvg

The table's width exceeds the appropriate size

Take a look at the code snippet below <%-- Document : index Created on : Feb 7, 2014, 1:03:15 PM --%> <%@page import="java.util.Map"%> <%@page import="java.util.Iterator"%> <%@page import="analyzer.DataHolder"%> <%@p ...

javahtmlcssjsp

How to retrieve the width of an unspecified element using JavaScript

Seeking help with a div element that adjusts its size based on the elements it contains. How can I determine the final size of this dynamic div without checking the sizes of its internal elements? I've attempted to parse all the properties of the obj ...

javascriptjquerycssdimensions

Panel div fails to show visNetwork visualization

After experimenting with shinyLP for creating html elements and crafting network diagrams using visNetwork, an interesting observation was made. When visNetwork is placed in a well panel or without any panel at all, it displays properly. However, the issue ...

htmlrshinygraph-visualizationvisnetwork

Using various colors to highlight specific sections of a letter or number

I am striving to recreate the unique image shown below, particularly interested in achieving the multi-colored effect on the numbers. This aspect of having different colors for parts of the number is intriguing and I would love to learn how it's done. ...

javascripthtmlcss

Creating unique CSS class and ID names dynamically in PHP

I have two divs with randomly generated IDs and I would like to use those IDs in my CSS instead of using inline styles. Is there a way to achieve this without creating a separate PHP file with a CSS header? For example, I want the padding for the ID $id_ ...

phpcssrandom