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 CSS (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
& lt; Div id = "bar1" & gt; & Lt; Div style = "width: 55%; text-line: center;" & Gt; Exam & lt; / Div & gt; & Lt; / Div & gt;
# 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}}
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
Post a Comment