How do I center a Bar Format from Google Visualiza

问题:

This is a continuation of this question where I asked how to center a number (i.e. text return) from the Google Visualization API. The new issue I am having is that I want to show progress bars for a specific piece of data, and I would like to center them. I am using the Bar Format. However, my CSS does not seem to work. I know that I should be able to apply CSS to a specific tag within a named element (or I believe I can).

Here is picture of the current site:

I believe if I can remove float: left; as inherited from the google process and add margin: 0 auto; this will all work. Here is a JSFiddle of my work so far.

回答1:

Yes, removing the float:left; works well.

With reference to your question How do I center numbers in a table from Google Visualization API?, the solution is simple as stated in one of its anwser.

You need to overwrite the css inherited by the API for the span tag inside the td.

span{
    float:none !important;
}

Here's the fiddle for it: http://jsfiddle.net/a8e3re72/5/