I have a simple chart that is inside a bootstrap responsive grid. When the grid allows enough horizontal space, the legend at the bottom is centered properly, see this jsfiddle: http://jsfiddle.net/3zj4q5dg/
When the grid jumps down and the width is restricted, the legend wraps. I am OK with the wrapping, but I expected it to still be centered text. However, the legend is now left-aligned after wrapping: http://jsfiddle.net/7kvubsnn/
Notice the only difference between the two fiddle examples is the width of the containing div.
How do make it so the legend text is centered aligned even when it wraps? I expected it to look like this: http://oi63.tinypic.com/xee7na.jpg
