How to center jquery sparkline canvas in div

Question

I can't seem to center the canvas created by jquery sparklines in a div element. The canvas has a fixed-width, but the usual css (display:block; margin:0 auto;) doesn't seem to work.

Here's the jsfiddle:

http://jsfiddle.net/7V5nH/

Could someone please tell me how I can center this canvas?

Thanks

Answer 1

I figured it out, but the answer is a little unintuitive. I had to use the following css properties on the containing element.

.inlineSparkline {
    display:block;
    text-align:center;
}

Here is the updated fiddle.

http://jsfiddle.net/4typS/

Using text-align:center for non-textual elements doesn't make sense to me, but at least it works now.

Update:

rajmathan's suggestion of using text-align:center on the canvas' grandparent also works. Here is the jsfiddle:

http://jsfiddle.net/GmLSB/

Answer 2

try so

<div class="chartContainer">
    <div class="inlineSparkline">1,4,4,7,5,9,10</div>
</div>

css

.chartContainer {
    border:1px solid green;
    width:300px;
}

.inlineSparkline {
    display:block;    
    margin: 0 auto;
    text-align:center;
}

demo