0
264
ViewsCentrar texto en línea como si fuera un bloque en línea
Estoy creando este diseño, que parece tan simple, pero tengo dificultades para centrarlo y mantener el texto alineado a la izquierda.
Hice la display:inline porque necesito que el fondo abarque solo el texto real en lugar del ancho completo del bloque. Pero necesito centrar el bloque mientras dejo el texto alineado a la izquierda. Así que envolví el texto en un div con un ancho máximo y luego centré el div.
<div class="highlight-wrapper"> <h2 class="highlight">This is a highlighted headline lorem ipsum dolor sit.</h2> </div> .highlight { display:inline; position:relative; border-left:6px solid red; -webkit-box-decoration-break: clone; background:#2056a7; color:white; } .highlight-wrapper { max-width:60%; margin:0 auto; } Problema resuelto. Excepto que no. Porque esto debe ser repetible para encabezados de diferentes longitudes. Un título breve no aparecerá centrado si el envoltorio es más ancho. Podría usar text-align:center cuando el título es lo suficientemente corto como para estar en una línea, pero dado que el sitio responde, eso no está garantizado.
También intenté usar la etiqueta <mark> pero eso no hizo nada diferente.
Aquí hay un violín de cosas que he probado.
¿Hay una solución CSS? (Si no, estoy abierto a JS si no es tan malo para el rendimiento).
1 answers
Answer question0
Creo que lo mejor que se me ocurre es agregar display:table al contenedor div. Esto centra correctamente los títulos cortos que no ocupan el ancho máximo completo. Para títulos más largos que se dividen en 2 líneas, sigo obteniendo resultados mixtos sobre la precisión con la que se ve centrado, a menos que agregue manualmente un salto de línea entre las líneas. (Lo cual no quiero hacer porque las líneas deben ajustarse de manera receptiva). Pero supongo que esta es la única opción basada en CSS. Esperaré un par de días para marcar esto como correcto en caso de que alguien se acerque con una idea mejor.
.highlight-wrapper { max-width:60%; margin:0 auto; display:table; }