How to center progress bar in widget

  • Unknown's avatar
    nasimaali · Member ·

    Hi I’ve been trying to install a progress bar widget on to the sidebar of my blog. I’ve managed to centre the image of the widget and the text but the actual progress bar I cannot get to centre. The html I’m using is the following. Thanks in advance!

    <div style="text-align:center;"><a href="http://bookishatheart.com/goodreads-2015-reading-challenge/"><img title=" Goodreads 2015 Reading Challenge" src="https://bookishatheart.files.wordpress.com/2015/01/goodreads-20151-e1421010841283.jpg" width="”100”/" /></a>
<div style="text-align:center;"><div style="width:102px;height:15px;background:none repeat scroll 0 0 rgb(255,255,255);border:1px solid rgb(0,0,0);"><div style="width:50px;height:13px;background:none repeat scroll 0 0 rgb(242,153,46);font-size:8px;line-height:8px;"></div></div>
I have read 0/60 books!

    The blog I need help with is: (visible only to logged in users)

  • staff-happychia · Staff ·

    I modified the markup you pasted in your description to the following:

    The changes I made are:

    1. Removed
    <div style=”text-align:center;”>

    2. Added a right margin of 87px to one of the divs.

    So the following markup should center your progress bar.

    <a href="http://bookishatheart.com/goodreads-2015-reading-challenge/"><img title=" Goodreads 2015 Reading Challenge" src="https://bookishatheart.files.wordpress.com/2015/01/goodreads-20151-e1421010841283.jpg" width="”100”/" /></a>
<div style="width:102px;height:15px;background:none repeat scroll 0 0 rgb(255,255,255);border:1px solid rgb(0,0,0); margin-left:87px"><div style="width:50px;height:13px;background:none repeat scroll 0 0 rgb(242,153,46);font-size:8px;line-height:8px;"></div></div>
I have read 0/60 books!
  • Unknown's avatar
    nasimaali · Member ·

    Thank you so much chaitanyamsv! The progress bar is now centred. However, the image and the text are now left-aligned instead of centred also. What would be the code to get the image and text to centre too?

  • Unknown's avatar
    nasimaali · Member ·

    Apologies, I’ve had a play around with the original code I put in and I’ve managed to get the whole thing centred (image, text and progress bar) Thank you so much for all your help, chaitanyamsv. Your solution for the progress bar worked a treat!

  • staff-happychia · Staff ·

    Cool, you are welcome :-)

  • The topic ‘How to center progress bar in widget’ is closed to new replies.