How do I center a SingleValue displayed in a panel?

[beaumaris]

We have a dashboard that has a number of panels (2 rows with 3 panels each). The second row has a SingleValue element displayed in each of the 3 panels, but the elements are left-justified inside the panel and we would like them centered. The docs for SingleValue and the surrounding modules don't seem to have a parameter that we can set to determine where the SingleValue is displayed within the panel

[Parameshwara]

This worked for me instead:

/* SingleValue position*/
.SingleValue .SingleValueHolder {
color:#111111;
font-size:15px;
font-weight:300;
width: auto;
min-width: 100%;
}

[ftk · Accepted solution]

You can edit the stylesheet definitions for the SingleValue panels. You can either do this system wide in

$SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/css/skins/default/default.css

or at a splunk app level in

$SPLUNK_HOME/etc/apps/YOUR_APP_NAME/appserver/static/application.css

The class you need to modify is .SingleValueHolder.

W3C guide on centering things with CSS: http://www.w3.org/Style/Examples/007/center

[edit:] In addition you should be able to define a custom class in your application.css stylesheet and then apply it to the SingleValue module using the additionalClass parameter. This would probably be the cleaner approach. Rather than centering all SingleValue modules this way you can control which ones will be centered. Check out the available params: http://www.splunk.com/base/Documentation/4.1/Developer/ModuleReference#SingleValue

[Parameshwara]

using auto on margin left & right didn't work for me. Instead using:

width: auto;
min-width: 100%;

worked for me.

[beaumaris]

Worked perfectly, the following simple snippet did the trick:

.SingleValueHolder {
margin-left: auto ;
margin-right: auto ;
}