0

Tengo un problema que no logro solucionar, y es dentro de un contenedor con tres elementos inline. Centrar el elemento que esta entre los otros dos respecto al ancho de su contenedor.

Teniendo lo siguiente:

<div>
   <a style="float: left;"><span style="mis estilos">uno</span></a>
   <a style="margin: auto 0;"><span style="mis estilos">dos</span></a>
   <a style="float: right;"><span style="mis estilos">tres</span></a>
</div>

Poniendo en el estilo del elemento central lo siguiente:

margin: auto 0; 

o

text-align: center;

o

position: absolute; margin: auto 0;

en un navegador de escritorio parece funcionar. Pero en el navegador del móvil el elemento se me coloca centrado al ancho del espacio entre los otros dos en vez de al ancho a todo su contenedor.

1
  • ¿Has intentado hacerlo con flexbox? Commented el 26 jun. 2019 a las 13:39

2 respuestas 2

1

Te dejo una solución que creo que te podría valer. Consiste básicamente en darle un ancho a cada columna y centrar el contenido de cada una de ellas en función de las necesidades que planteas. Al ser un tamaño porcentual da igual en que dispositivo te encuentres siempre ocupara el mismo. Espero que te sea útil:

.redistribuye {display: flex;}
.redistribuye a{align-items: center; width: 33%}
.redistribuye a.left{text-align: left; background-color: red; color: #fff}
.redistribuye a.center{text-align: center; background-color: orange; color: #fff}
.redistribuye a.right{text-align: right; background-color: green; color: #fff}

<div class="redistribuye"> <a class="left">uno</a> <a class="center">dos</a> <a class="right">tres</a> </div>
1
  • 1
    Gracias por el aporte
    – Popularfan
    Commented el 11 dic. 2019 a las 13:59
0

Prueba con propiedades flexbox:

<div style="display: flex; justify-content: space-between">
    <a><span style="mis estilos">uno</span></a>
    <a><span style="mis estilos">dos</span></a>
    <a><span style="mis estilos">tres</span></a>
</div>

También puedes probar cambiando por space-around para que te ponga más márgenes.

Como lo que requieres debe centrar el segundo el elemento con respecto al ancho de su contendor, deberías hacerlo con un margin-left o margin-right:

<div>
    <a style="float: left;"><span style="mis estilos">uno</span></a>
    <a style="margin-left: 40%;"><span style="mis estilos">dos</span></a>
    <a style="float: right;"><span style="mis estilos">tres</span></a>
</div>
3
  • No me funciona, en los navegadores de escritorio los elementos me los situa bien centrado pero en el móvil el elemento central me lo situa centrado respecto al ancho del espacio entre el elemento de la izquierda y el elemento de la derecha. Solo se me ocurre posicionar el elemento que tiene que ir centrado con un position:absolute y un right: 50% - ( el ancho del elemento central div 2) pero no se como hacerlo.
    – Popularfan
    Commented el 26 jun. 2019 a las 14:50
  • Correcto, el centro será respecto al espacio disponible entre los elementos de los extremos, sin embargo dependiendo de tu objetivo esta sería la mejor forma de presentar los elementos. He editado la respuesta para hacer lo que sugieres. Commented el 26 jun. 2019 a las 18:44
  • Pero en cambio el navegador de PC el elemento central lo posiciona en la mitad del ancho del contenedor.
    – Popularfan
    Commented el 27 jun. 2019 a las 8:55

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.