Básicamente, quiero centrar el texto, ignorando cualquier elemento hermano flotante.CSS: ¿Cómo puedo centrar el texto a pesar de que haya un elemento flotante al lado?
Al principio, pensé que esto no sería un problema, ya que tenía la impresión de que un elemento flotante no tomaba del ancho de ningún elemento hermano.
Example (Quiero que el texto de color rojo a estar en el centro de la caja azul, a pesar del texto verde)
¿Cómo se logra esto mejor?
No se puede. Si estuviera centrado dentro del cuadro padre, entonces el flotador se superpondría al contenido en algún punto, lo que estaría derrotando el punto del flotador. Hay dos enfoques que puede usar aquí. Si conoce el ancho del flotador, puede aplicar un margen derecho igual negativo. De lo contrario, puede colocar absolutamente el elemento like this.
Aquí hay un enlace a un violín de trabajo: http://jsfiddle.net/cD657/3/
(en su ejemplo, se abrió una <span>, y la cerró con </div>)
lo hice un div y se lo di margin: 0px auto; y una anchura. -parecía hacer el truco
¿Pero cuando no tienes un ancho fijo? Básicamente no puede hacer esto cuando no conoce el ancho de ninguno de los elementos: el flotante o el texto que desea centrar. Me encontré con este problema ahora y busqué una solución, sin suerte. Tengo un botón y un texto, ambos en el mismo DIV. Quiero que el botón se alinee a la izquierda y el texto al centro del elemento principal (DIV). Intenté con el posicionamiento absoluto en el botón y text-align: centrar en el div principal y funcionó, pero luego, cuando el texto es más grande, irá detrás del botón :( – Adrian
Puede mantener como lo tiene, pero simplemente agregando relleno en el lado opuesto con el mismo valor de píxel que el ancho del elemento flotante.
.parent{
text-align: center;
}
.centered.element{
padding-left: [width of floating element]px;
}
.floating.element{
float: left;
}
para encontrar el ancho fácilmente sólo tiene que utilizar Developer Tools en cualquier navegador moderno a Inspect el elemento.
Ver violín aquí: http://jsfiddle.net/cD657/369/
Nota: Esto puede no funcionar si el elemento de centrado tiene un color asignado background.
La única otra opción que puedo pensar es hacer un objeto de tamaño idéntico (por ejemplo, 'div' invisible) y flotarlo al lado opuesto del contenedor principal (que contiene otro float molesto). Es mejor que usar un margen para equilibrar el centrado porque el objeto flotante afectará el centrado del texto incluso si no está en el mismo contenedor que el texto. Pensamientos? Funciona muy bien para mí. – Slink
Me gustó tu idea: de lo contrario, puedes posicionar el elemento de esta manera. –
sí, el posicionamiento de un pariente absoluto hace el truco – Fanky