CODEWITHSUNDEEP
css
422
422

Reputation: 5770

centering span txt using css , issue with double digits

Ok this is quite a weird question.

I cannot for the life of me center this span within the div. So I have positioned it.

However, what I want is to center the blue numbers exactly within the div. Trouble is, when the numbers change to 10, it shifts to the right a tad. Had a fellow Stacker, helping me with the js, just need some help with alignment within css now.

Im not sure if you can absolutely centre a counter that centers a single number, and the double digit number is centered too.

Dont make sense ?

K link: Test Page

Css ( i know its not centered for span element timer but it needs to be centered.

Cant get Stack to display code correctly, please check source of the link

Any suggestions on centering the NUMBERS, so that they are dead horizontal center. AND that when number jumps to 10 it doesnt shift to the right or left ?

Upvotes: 0

Views: 894

Answers (2)

dubrox
dubrox

Reputation: 649

Just remove the "top", "left" and "position" properties from the ".timer" element and add "text-align: center" to the ".content" element. 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;
}
.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);
}

HTML:

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

Upvotes: 2

Jan
Jan

Reputation: 8141

remove the absolute positioning, add text-align: center to the div, add a top margin to the span to center it vertically.

.content {
  text-align: center;
}

.timer{
  position: static;
}

You don't need the position: static but I added it because you had it on absolute on your page.

Upvotes: 1

Related Questions