Link to home
Start Free TrialLog in
Avatar of kgp43
kgp43Flag for Denmark

asked on

How to center jQuery Progress bar text

Hi,

I have this jQuery progressbar but have problems to center the text.
I can use margin-left:50%, but thats not 100% accurate.
Is it possible to use text-align:center instead? if so, how?


JS:
$(function() {
	
	var progressbar = $( "#progressbar" ),
		progressLabel = $( ".progress-label" );
	
	progressbar.progressbar({
			value: false,
			change: function() {
				progressLabel.text( "Loading image (" + progressbar.progressbar( "value" ) + "%)" );
			},
			
		complete: function() {
			/*progressLabel.text( "Complete!" );*/
			
			$('.hideme')
				.hide()
			;
			
			$('.showme')
				.fadeIn(2000)
			;
		}
	});

	function progress() {
		var val = progressbar.progressbar( "value" ) || 0;
		
		progressbar.progressbar( "value", val + 1 );
		
		if ( val < 99 ) {
			setTimeout( progress, 70 );
		}
	}

	setTimeout( progress, 1000 );
});

Open in new window


CSS:
/****** PROCESS BAR ****/
.progress-label {
	float: left;
	#margin-left: 50%;
	margin-left: 20px;
	margin-top: 5px;
	font-weight: bold;
	text-shadow: 1px 1px 0 #fff;
}

Open in new window

Avatar of LZ1
LZ1
Flag of United States of America image

Any way we can see it in action? Like a live link or rendered HTML?
Avatar of kgp43

ASKER

use margin:auto;  Make sure it comes after other margin settings, and if the query has not done something stupid like applying an inline style it should center.

Cd&
Avatar of kgp43

ASKER

I tried to add margin:auto after all over margins, but the text just align left (like there is no alignment working).
ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of kgp43

ASKER

That was simple, thanks a lot :D
Avatar of kgp43

ASKER

Excellent :D
:)

golden rule: KISS
(w/o the makeup)