Cómo alinear en el centro las pestañas de la interfaz de usuario de jQuery: con la captura de pantalla

Question

¿Alguien sabe cómo alinear las pestañas en el centro en jQuery UI tabs?

(Ellos se quedan alineados de forma predeterminada y no puedo encontrar la opción de alineación en el doc)

Aquí es donde a page lo uso para grupos algunos gráficos y el código actual es simplemente:

$('#chart_tabs').tabs(); 

ACTUALIZACIÓN: El código CSS:

.ui-tabs .ui-tabs-nav { 
      text-align: center; 
    } 

    .ui-tabs .ui-tabs-nav li { 
      float: none !important; 
      display: inline-block; 
    } 

sugerido por Didier (gracias) tiene alineado al centro de las pestañas, sino también poner un poco extraño hueco debajo del tabuladores "botones":

Answer 1

Esto me cortó ayudar a cabo en los días. .

.centered .ui-tabs-nav { 
    height: 2.35em; 
    text-align: center; 
} 
.centered .ui-tabs-nav li { 
    display: inline-block; 
    float: none; 
    margin: 0em; 
} 

tal vez esto funciona para usted también

Answer 2

la forma más fácil es aplicar text-align: center sobre el recipiente (el elemento UL) y t unfloat He Li:

.ui-tabs .ui-tabs-nav { 
    text-align: center; 
} 

.ui-tabs .ui-tabs-nav li { 
    float: none !important; 
    display: inline-block; 
} 

Answer 3

Esto funcionó para mí y para evitar el vacío (por debajo de las pestañas) que usted ha mencionado:

.ui-tabs-nav { 
    float: none; text-align: center; 
} 

.ui-tabs-nav li { 
    display: inline-block; float: none; 
} 

.ui-tabs-nav li a { 
    float: none; 
}