Elementos de centrado en jQuery Mobile

Question

¿El marco jQuery Mobile tiene una forma de elementos de centrado, específicamente botones? Parece que el valor predeterminado es-alineación dejado todo y no puedo encontrar una manera (en el marco) para hacer esto.

Answer 1

jQuery Mobile no parece tener una clase CSS a elementos del centro (He buscado a través de su css).

Sin embargo, usted puede escribir su propio CSS adicional.

Trate de crear su propia:

.center-button{
  margin: 0 auto;
}

ejemplo HTML:

<div data-role="button" class="center-button">button text</div>

y ver qué pasa. Es posible que necesite conjunto text-align al centro en la etiqueta de embalaje, por lo que este trabajo podría mejor:

.center-wrapper{
  text-align: center;
}
.center-wrapper * {
  margin: 0 auto;
}

ejemplo HTML:

<div class="center-wrapper">
  <div data-role="button">button text</div>
</div>

Answer 2

una exageración acercarse: en CSS en línea en el div resolvieron el problema:

style="margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;"

Centros como un encanto!

Answer 3

En la situación en la que no se va a utilizar una y otra (es decir, no necesitan en su hoja de estilo), declaración de estilo en línea por lo general trabajan en cualquier lugar que trabajarían inyour hoja de estilo. Por ejemplo:

<div data-role="controlgroup" data-type="horizontal" style="text-align:center;">

Answer 4

La mejor opción sería la de poner cualquier elemento que desea estar centrado en un div como esto:

        <div class="center">
            <img src="images/logo.png" />
        </div>

y css o de estilo en línea:

.center {  
      text-align:center  
 }

Answer 5

Me había encontrado problemas con algunos de los otros métodos mencionados aquí. Otra manera de hacerlo sería el uso de diseño de cuadrícula B, y poner su contenido en el bloque B, y los bloques de licencias A y C se vacíe.

http://demos.jquerymobile.com/1.1. 2 / docs / contenido / contenido-grids.html

<div class="ui-grid-b">
	<div class="ui-block-a"></div>
	<div class="ui-block-b">Your Content Here</div>
	<div class="ui-block-c"></div>
</div><!-- /grid-b -->

Answer 6

Ninguna de estas respuestas solo trabajó para mí. Tenía que combinarlos. (Tal vez es porque estoy usando una etiqueta de "botón" y no un enlace escrito como un botón?)

En el código HTML:

<div class="center-wrapper"><button type="submit" data-theme="b">Login</button></div>

En el CSS:

.center-wrapper {
    text-align: center;
    width: 300px;
    margin:0 auto;
    margin-left:auto;
    margin-right:auto;
    align:center;
    text-align:center;
}

Answer 7

Se puede hacer que el botón de un elemento de anclaje, y lo puso en un párrafo con el atributo:

align='center'

funcionado para mí.

Answer 8

Para tenerlos centrada correctamente y sólo para los elementos dentro de la envoltura .center-envoltura de utilizar este. (Todas las opciones combinadas deben trabajar con navegadores) si no por favor enviar una respuesta aquí!

.center-wrapper .ui-btn-text {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    margin: 0 auto;
}

Answer 9

Esto funciona

HTML

<section id="wrapper">
    <div data-role="page">
    </div>
</section>

Css

#wrapper { 
    margin:0 auto;
    width:1239px;
    height:1022px;
    background:#ffffff;
    position:relative;
}

Answer 10

Ajustar como su requisito

   .ui-btn{
      margin:0.5em 10px;
    }