0

Hola a todos estoy trabajando con html, css y boostrap aca esta el codigo https://github.com/felipedelosh/ecomerceFuneraria y tengo el siguiente problema:

Tengo 7 elementos en un row:

<div class="mainSolutionIcons">
                    <div class="row">
                        <div class="col-1">
                            <div class="solutionMovil">
                                <img src="img/ico/movil.jpg" class="solutionIco">
                                <p>Movil</p>
                            </div> 
                        </div>
                        <div class="col-1">
                            <div class="solutionPos">
                                <img src="img/ico/pos.jpg" class="solutionIco">
                                <p>POS</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionEtiquetas">
                                <img src="img/ico/etiquetas.jpg" class="solutionIco">
                                <p>Etiquetas</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionSinRevestimiento">
                                <img src="img/ico/sin-revestimiento.jpg" class="solutionIco">
                                <p>Sin revestimiento</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionKioscos">
                                <img src="img/ico/kioscos.jpg" class="solutionIco">
                                <p>Kioscos</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionSuministros">
                                <img src="img/ico/suministros.jpg" class="solutionIco">
                                <p>Suministros</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionSoftware">
                                <img src="img/ico/software.jpg" class="solutionIco">
                                <p>Software</p>
                            </div>
                        </div>
                    </div>
                </div>

Imagen original

Cada imagen tiene un col-1 y el problema es que no se como centrar esos elementos.

Mi pregunta es la siguiente: ->Como centrar esos elementos si son impares?

Aquí les dejo un phoshopeado de lo que quiero:

introducir la descripción de la imagen aquí

1 respuesta 1

0

Hola para centrar este tipo de figuras, utiliza flex. Flex es un modelo de css que incorporó Boostrap 4 y que es excelente para hacer estos posicionamientos.

En tu caso agregá al rox inicial la secuencia "justify-content-center" y el código centrará todos los iconos. El nuevo código quedaría así

<div class="mainSolutionIcons">
                    <div class="row justify-content-center">
                        <div class="col-1">
                            <div class="solutionMovil">
                                <img src="img/ico/movil.jpg" class="solutionIco">
                                <p>Movil</p>
                            </div> 
                        </div>
                        <div class="col-1">
                            <div class="solutionPos">
                                <img src="img/ico/pos.jpg" class="solutionIco">
                                <p>POS</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionEtiquetas">
                                <img src="img/ico/etiquetas.jpg" class="solutionIco">
                                <p>Etiquetas</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionSinRevestimiento">
                                <img src="img/ico/sin-revestimiento.jpg" class="solutionIco">
                                <p>Sin revestimiento</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionKioscos">
                                <img src="img/ico/kioscos.jpg" class="solutionIco">
                                <p>Kioscos</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionSuministros">
                                <img src="img/ico/suministros.jpg" class="solutionIco">
                                <p>Suministros</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionSoftware">
                                <img src="img/ico/software.jpg" class="solutionIco">
                                <p>Software</p>
                            </div>
                        </div>
                    </div>
                </div> 

Explicación y datos

En este link podes encontrar la explicacion de los diferentes comandos que soporta BS4 para flexbox: link Que es lo que hace este comando que agregamos? crea un bloque con todo lo que engloba el row y lo centra de manera justificada. Si cambias el comando podes justificar a derecha, a izquierda e incluso poner espacios entre iconos para que queden columnas equidistantes (probá justify-content-between y justify-content-around y fijate como queda).

Una pagina que me dío mucho resultado para entender flexbox es https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-basics

Ojala esta info sea de utilidad.

1
  • Muchas gracias amigoooooo me funciono a la perfeción :) el 21 feb. 2021 a las 20:46

Tu Respuesta

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

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