css - Centering text on top of multiple Divs? -


I have a percent time and I'm trying to put some text in front of it.

My example does this, but it focuses on a short time, not everything.

My question: How do I get the word "test" centered at full time, not just small

HTML

  & lt; Div id = "bar1" & gt; & Lt; Div style = "width: 55%; text-line: center;" & Gt; Exam & lt; / Div & gt; & Lt; / Div & gt;   

CSS

  # bar1 {background color: black; Boundary-radius: 13px; / * (Height of inner div) / 2 + padding * / padding: 3px; } # Bar1 div {background-color: green; Height: 20px; Range radius: 10px; -WebKit-Background-Size: 50px 50px; Background image: -Vibit-repeat-radial-gradient (center, circle, green, # 00BB00 40%, green 80%); Webkit-Animation: Upbar 3S Linear Infinite; } @ -webkit-keyframes upbar {0% {background-position: 0}} 100% {background-position: 0px-100px}}   

(sorry for tasting the bar I'm trying to find an appropriate top animation for this, so any suggestions are welcome.)

The best way but it works:

with the second div with the position: full :

 < Code> & lt; Div id = "bar1" & gt; & Lt; Div class = "anime" style = "width: 55%;" & Gt; & Lt; / Div & gt; & Lt; Div class = "text" & gt; Test & lt; / Div & gt; & Lt; / Div & gt; # Bar1 div.anim {background color: green; Height: 20px; Range radius: 10px; -WebKit-Background-Size: 50px 50px; Background image: -Vibit-repeat-radial-gradient (center, circle, green, # 00BB00 40%, green 80%); Webkit-animation: upbar 3s linear endless; } # Times 1 div.text {text-align: center; Status: Completed; Color: #fff; Top: 3px; Left: 50%; Width: 100px; Margin-left: -50px; }    

Comments

Popular posts from this blog

excel vba - How to delete Solver(SOLVER.XLAM) code -

github - Teamcity & Git - PR merge builds - anyway to get HEAD commit hash? -

ios - Replace text in UITextView run slowly -