¿Hay alguna manera de tener texto alineado a la izquierda, centro y derecha en la misma línea con HTML/CSS, en las siguientes condiciones?Texto alineado a la izquierda, centro y a la derecha en la misma línea
- Las piezas de texto izquierda y derecha serán cortas, pero no sé su longitud con antelación.
- La pieza central de texto puede ser lo suficientemente larga como para envolverla.
- La pieza central de texto debe aparecer EXACTAMENTE en el centro.
- La pieza central de texto no debe solaparse con los textos de la izquierda o la derecha.
La solución obvia de usar 3 divs con los dos fl otados a izquierda y derecha funciona bastante bien, excepto que la pieza central de texto no está centrada exactamente (por ejemplo, si la parte izquierda del texto es más larga que la derecha, el centro aparece centrado justo a la derecha del centro absoluto).
Solo necesito una solución que funcione en WebKit. ¿Algunas ideas?
Editar - esto es lo que tengo hasta ahora ...
HTML:
<div id="left">Left</div>
<div id="center">Center text</div>
<div id="right">Right</div>
CSS:
#left {
float: left;
text-align: left;
padding-right: 10px;
}
#center {
text-align: center;
}
#right {
float: right;
text-align: right;
padding-left: 10px;
}
hmmm no yo sólo sé una solución JS donde se gire a la izquierda o derecha para el ancho y el uso para el otro lado ... sólo entonces el texto centrado es en el centro exaclty. sin anchuras no puedes hacer eso solo HTML y CSS ... puedes usar% ancho como 10% - 80% - 10% pero este ancho es fijo dependiendo del contenedor – ggzone
¿puedes publicar el código en el que estás trabajando? – ptriek
Suena como un trabajo para una mesa. Exactamente, ¿qué datos estás tratando de poner ahí? –