3

Estoy intentando centrar lo siguiente sin que pierda el responsive y no hay manera:

    <div class="row">
        <span class="col-md-1 text-right">Periodo:</span>
        <div class="col-md-2">
            <input value="01/11/2016" class="form-control" type="text">
        </div>
        <div class="col-md-2">
            <input value="29/11/2016" class="form-control" type="text">
        </div>
    </div>
    <div class="row">
        <span class="col-md-1 text-right">Select1</span>
        <div class="col-md-4">
            <select class="form-control">
                <option selected="selected" value="15">A</option>
                <option value="19">B</option>
            </select>
        </div>
    </div>
    <div class="row">
        <span class="col-md-1 text-right">Select2</span>
        <div class="col-md-4">
            <select tabindex="5" class="form-control">
                <option value="9">9</option>
                <option selected="selected" value="7">7</option>
                <option value="42">42</option>
                <option value="45">45</option>
                <option value="5">5</option>
                <option value="8">8</option>
            </select>
        </div>
    </div>
    <div class="text-center">
        <input value="Button1" class="btn btn-default" type="submit">
        <input value="Button2" class="btn btn-default" type="submit">
    </div>

http://codepen.io/anon/pen/XNeqyY

Los botones con un text-center están centrados, pero los spans y los textboxs de arriba no hay manera.

¿Cómo puedo hacer que el resto de elementos también queden centrados?

4
  • 2
    Hola Andrés, bienvenido. Por qué no pegas el código aquí y asi la gente se ahorra el visitar ese enlace? (que si se cae, tu pregunta queda inservible)
    – lois6b
    Commented el 29 nov. 2016 a las 9:24
  • Lo tendré en cuenta para la próxima, gracias :)
    – Andrés73
    Commented el 29 nov. 2016 a las 9:34
  • 1
    Para la proxima no, puedes hacerlo ahora y mejorar tu pregunta editandola. Aunque ya tengas una respuesta (recuerda aceptarla) es recomendable mejorar la pregunta todo lo posible. en el futuro alguien puede tener la misma duda que tú
    – lois6b
    Commented el 29 nov. 2016 a las 9:37
  • 1
    Hecho, gracias por los consejos
    – Andrés73
    Commented el 29 nov. 2016 a las 10:14

1 respuesta 1

6

Puedes utilizar flexbox y la propiedad justify-content: center para tu clase .row.

.row{
  display: flex;
  justify-content: center;
}

De esta manera cada uno de los elementos estará centrado horizontalmente dentro de sus correspondientes líneas.

Explicación de porque unos elementos se centran y otros no con text-center

En tu caso, los botones (que en este caso son inputs en realidad) se están centrando con la propiedad text-center porque son elementos inline y esta propiedad solo funciona para los elementos inline o inline-block. Por lo tanto, como los div por defecto son elementos que actúan como bloque (block), no se van a centrar con esta propiedad.

Codepen actualizado.

4
  • Muchas gracias por la rapidez! Un saludo
    – Andrés73
    Commented el 29 nov. 2016 a las 9:34
  • 1
    @Andrés73 De nada! No olvides marcar la respuesta como aceptada si ha resuelto tu duda. Gracias! ^^ Commented el 29 nov. 2016 a las 9:35
  • ¿Alguien me puede explicar el voto negativo? Commented el 29 nov. 2016 a las 10:08
  • Te recomiendo leer la siguiente pregunta / respuesta que yo mismo he hecho, @Andrés73 es.stackoverflow.com/questions/24964/… Te ayudará mucho a entender tu problema.
    – Hoose
    Commented el 29 nov. 2016 a las 14:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.