Trouble arises when attempting to center a text span using CSS with double digit numbers

Here's an interesting challenge for you.

I've been struggling to center this span within the div, so I resorted to positioning it.

The issue is that I want the blue numbers to be perfectly centered within the div. But when the number changes to 10, it shifts slightly to the right.

A helpful colleague on Stack Overflow assisted with the JavaScript, but I'm now seeking guidance on aligning it using CSS.

I'm unsure if it's possible to absolutely center a counter that displays single and double digit numbers without any shifting.

Confusing, right?

Check out the link: Test Page

The CSS code (I know the span element timer isn't centered, but it should be).

I can't seem to get Stack Overflow to display the code correctly, so please view the source of the link.

Any suggestions on how to perfectly center the NUMBERS horizontally in the middle and prevent any shifting when the number changes? Would greatly appreciate any help!

css

Answer №1

To center the content, remove the "top", "left" and "position" properties within the ".timer" element and instead add "text-align: center" to the ".content" element. Here is the updated CSS:

.content {
    height:140px; 
    width:240px; 
    border-color: #51505b; 
    border-style:solid; 
    border-width:1px; 
    left:500px;
    position:relative;
    -moz-border-radius: 6px; -webkit-border-radius: 6px;
    text-align: center; /* Added line */
}
.timer {
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:5em;
    color: #398fe8;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.msg {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: #51505b;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

Below shows how your HTML should look after these changes:

<div class="content">
    <span class="timer">10</span>
    <br>
    <span class="msg"></span>
</div>

Answer №2

To center the content vertically, remove absolute positioning and apply text-align: center to the div. Additionally, add a top margin to the span element.

.content {
  text-align: center;
}

.timer{
  position: static;
}

I included position: static in case it was set to absolute on your page, although it is not necessary.

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

Styling with CSS Attributes

While conducting research on CSS specifications through W3C, I stumbled upon this document. Although the Wikipedia page claims it is part of level 3. However, I have a couple of questions: The document does not explicitly state that it belongs to level 3 ...

css

Disregarding the Syntax of jQuery Mobile

Is there a way to override jQuerymobile's formatting and classes when styling an element? I want to apply my own custom style. I attempted using $.mobile.ignoreContentEnabled = true; in the pageInit function, followed by adding data-role="none" to th ...

jquerycssjquery-mobile

What is the best way to align sections side by side using Bootstrap?

Hello, I'm currently trying to customize the layout of this Bootstrap webpage to resemble the design shown in this image https://i.sstatic.net/w7i6Z.png. Specifically, I want to display the blog section and the team section side by side. As a beginne ...

htmlcssbootstrap-4

Creating a simple vertical layout with a fixed header and footer using basic HTML and CSS, allowing for easy stretching and customization

Looking for advice on creating a vertical layout with a static height header and footer, while allowing the center to occupy all available space and adjust to the window height. header ------ center ------ footer Any suggestions would be greatly appr ...

htmllayoutxhtmlcss

Enhancing Your HTML Formatting in PHPStorm

I have a list of li elements and ran into the issue of unwanted space between inline block elements. To address this problem, I used the comment trick which worked fine initially. However, when I tried to format the code using PHPStorm, the comments were n ...

htmlcssphpstorm

PhoneGap Android: Strange behavior with input color and focus (demonstrated with visuals!)

I'm encountering two issues with the input box in my PhoneGap HTML5 CSS3 application. 1) Whenever I select or focus on the input, the background color changes to white and the text color becomes black. Have I overlooked a specific CSS property for th ...

androidhtmlcssinputcordova

What is the best way to position a div with the 'inline-block' attribute inside another div element?

What is the best way to position the .square elements inside the #about_container? The squares should be aligned 10px from the top of #about_container, regardless of whether there is text present. #about_container { position: absolute; width: 100%; ...

htmlcss

Alert classes are not included in bootstrap 5 npm package

In my Angular 13 project, I am utilizing Bootstrap version 5.2.1. While most components are working as expected, the alert component seems to be missing some styling elements. Specifically, I have noticed that alerts with the classes alert-success and aler ...

cssbootstrap-5

CSS selectors can be used to alter the styling of the container surrounding the text

My current content includes: <span> Hello </span> I am looking to apply CSS selectors to either replace or enclose the text inside the element with an <h1> Is it doable using only CSS selectors? ...

htmlcss

The inner panel height does not extend to 100% when there is overflow

When pressing the submit button on a panel containing components, an overlay appears but does not cover the entire parent panel if scrolled to the bottom. Additionally, I want the spinner to always be centered, whether scrolling or not. I've tried usi ...

htmlcssangular

Keep a consistent square proportion within a horizontal adaptable design

I am currently working on creating a responsive material list view that consists of cards with images, text details, and user actions. The challenge I'm facing is that the height of the cards can vary due to the different textual details, and the widt ...

htmlcssflexbox

Utilizing CSS3 Box-Shadow on elements within Internet Explorer

Hey there, I've been trying to add a box shadow to my main content box, but I noticed that it doesn't display correctly in Internet Explorer. Instead of the shadow being applied to the edges of the box like it does in Firefox and Chrome, it seems ...

cssinternet-explorerbox-shadow

Ways to ensure text fits nicely within a container: HTML & CSS

Below is a code snippet: @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .square { max-width: 460px; background: white; border-radius: 4px; box-shadow: 0px 5px 20px #D9DBDF; -webkit-transition: all 0. ...

javascripthtmljquerycsssass

evaluating the type of something returns false, but it's accepted as true

I am striving to enhance my SASS media query mixin by introducing different variations of input to it. @media(medium) @media([small, to-large]) @media([[small, to-large], [small, landscape]]) However, I am encountering an issue with an if stateme ...

htmlcsssassscss-mixins

Utilize jQuery to dynamically update the box-shadow property with inset added

I have a situation similar to this: $('.inset').click(function(){ if($('.inset').is(':checked')){ $('.box-shadow').css('boxShadow','inset'); }else{ $('.box-shadow&ap ...

jqueryhtmlcss

Should I use margin-top, padding-top, or top?

I often mix up padding-top, margin-top, and top. My issue arises when I need to create a space of 15px. Using margin-top: 15px seems to work, but I suspect it might be incorrect? .subtitles{ font-size:13px; font-family: "Open Sans","Helvetica Neue", ...

css

Replace CSS property with a new CSS property

How can I remove a property from a class when using a library? For example, if the library has the following CSS: div { width: 100%; } And in your custom CSS file you want to remove the width property: div { width: none; //is this the correct w ...

htmlcsspropertiesoverriding

Using Symfony2 Knp-snappy library for PDF generation, the CSS styling is not being properly imported

Attempting to create a PDF from an html.twig template, but facing some issues... Although the content is correct in the PDF, the layout is missing. It appears that the CSS files are not being imported... Bootstrap from Twitter is being used to handle the ...

phpcsstwitter-bootstrapsymfonypdf

What is the reason for nth-of-type selectors not functioning on the third element?

I have a question regarding CSS nth-of-type. In the following code snippet, nth-of-type(2) and nth-of-type(3) are functioning properly, however, nth-of-type(4) and nth-of-type(5) are not working as expected. Could there be an issue with my code? <div i ...

htmlcsscss-selectors

What is the best way to assign two styles with the same value in a single line of code?

Can you suggest a simpler method for expressing left:15%;right:15%, such as using left,right:15% or something equivalent? Your assistance is greatly appreciated! ...

css