CODEWITHSUNDEEP
csshtml
Cully
Cully

Reputation: 470

Centering text on top of multiple Divs?

I have a percentage bar and I'm trying to put some text over the front of it.

My example does that, but it centers over the smaller bar, not the full thing.

My Question: How can I get the word "test" centered over the full bar, not just the inner-smaller one.

HTML

<div id="bar1">
<div style="width:55%; text-align:center;">test</div>
</div>

CSS

#bar1 {
  background-color: black;
  border-radius: 13px; /* (height of inner div) / 2 + padding */
  padding: 3px;
  } 

#bar1 div 
{
    background-color: green;
    height: 20px;   
    border-radius: 10px;
    -webkit-background-size:50px 50px;
    background-image:
        -webkit-repeating-radial-gradient(center, circle, green, #00BB00 40%, green 80%);
        -webkit-animation:upbar 3s linear infinite;
}

@-webkit-keyframes upbar
{
    0%{background-position:0 0}
    100%{background-position:0px -100px}
}

(apologies for the cheesiness of the bar. I'm trying to find a decent upward animation for it, so any suggestions welcome)

Upvotes: 1

Views: 367

Answers (3)

Manish Mishra
Manish Mishra

Reputation: 12375

that's because your inner bar has width:55% of the parent div(div.bar1). either give it a full width, to bring the text to the center, or place your text outside.

you can also play with position:absolute

see this fiddle

Upvotes: 1

FelipeAls
FelipeAls

Reputation: 22171

You can center horizontally the child div with margin: 0 auto:

Upvotes: 1

greener
greener

Reputation: 5069

There's probably a better way but this works: http://jsfiddle.net/SFHft/

Use a second div with position:absolute:

<div id="bar1">
    <div class="anim" style="width:55%;"></div>
    <div class="text">TEST</div>
</div>

#bar1 div.anim 
{
    background-color: green;
    height: 20px;   
    border-radius: 10px;
    -webkit-background-size:50px 50px;
    background-image:
        -webkit-repeating-radial-gradient(center, circle, green, #00BB00 40%, green 80%);
        -webkit-animation:upbar 3s linear infinite;
}

#bar1 div.text 
{
    text-align:center;
    position:absolute;
    color:#fff;
    top: 3px;
    left: 50%;
    width: 100px;
    margin-left: -50px;
}

Upvotes: 1

Related Questions