¿Cómo puedo centrar el texto alineado a la izquierda incluso cuando se ajusta?

Question

Necesito centrar un bloque de texto alineado a la izquierda dentro de un div, pero necesito que el ancho visual del bloque de texto no se centre en el bloque mismo.

En muchos casos, esto puede ser lo mismo, pero piense en un caso donde el div es bastante estrecho (piense en anchos móviles) y el texto es demasiado largo para caber en una línea, por lo que debe desbordarse.

En los ejemplos a continuación, estoy mostrando el bloque de texto como azul claro para ilustrar, pero en la práctica serán del mismo color que el div principal (blanco). Tampoco hay saltos de línea en ningún texto utilizado.

En el 1a, el texto es sólo una línea y es más pequeña que la anchura máxima del bloque de texto, para que pueda establecer el bloque de texto a la anchura del texto y allí isn no es un problema

En 2a Sin embargo, el texto es más largo que el ancho máximo y se ajusta a la siguiente línea. El efecto de esto es que el bloque de texto visible ya no aparece centrado.

¿Cómo puedo mostrar estas dos situaciones como 1b y 2b solamente el uso de HTML y CSS?

Edit 1: Parece que todo el mundo me está diciendo cómo lograr la situación en 1a y 2a, pero ya lo tengo. Quiero lograr la situación en 1b y 2b.

Edit 2: El código que estoy usando es esencialmente el mismo que David dio en su enlace (http://jsfiddle.net/davidThomas/28aef/). Sin embargo, el uso de un color para el área de texto es solo para ilustrar este punto. Si pasa a blanco (http://jsfiddle.net/28aef/2/) se puede ver cómo el bloque de texto ya no se parece centrado (es decir, márgenes izquierdo y derecho no son iguales)

Answer 1

<div style="text-align:center;"> 
    <div style="display:inline; text-align:left; margin:20px;"> <!-- or whatever width you want that block to be at --> 
      Content here 
    </div> 
</div> 

Básicamente, la primera div es su elemento contenedor. Necesita alinear el texto al centro.

Luego, en su div del bloque (el área azul), debe mostrar en línea y alinear el texto a la izquierda, luego establecer un margen (el espacio en blanco que desea permanecer alrededor cuando el texto se ajusta).

Answer 2

Sé que esto es viejo, pero acabo de tener el mismo problema, y ​​estoy de acuerdo en que ninguno de estos lo resuelve. Este puede no ser 100% entre navegadores (no se han hecho pruebas) ¡pero funciona!

Ahora la restricción es que tiene que poner en el salto de línea, pero parece que es lo que hay que hacer, independientemente de este tipo de situación.

http://jsfiddle.net/28aef/2/

div.textContainer { 
    text-align: center; 
    border: 1px solid #000; 
    height: 100px; 
    padding: 10px 0; 
} 

div.textContainer p { 
    display: inline-block; 
    text-align: left; 
} 

Answer 3

supongo esto desde hace mucho tiempo se ha convertido en un problema no para el cartel original, pero tenía la misma pregunta y estaba buscando en Google para encontrar una respuesta. Debajo está el resultado de lo que encontré.

Descargo de responsabilidad: No soy un experto en esto y otros pueden tener una forma más elegante de manejar esta situación, pero funcionó para mi aplicación y puede funcionar para otras aplicaciones, así que pensé en publicarla.

<div style = "text-align: center; margin-left: 10%; margin-right: 10%"> 
    <div style = "display: inline-block; text-align: left;"> 
     Desired text goes here. 
    </div> 
</div> 

Tenga en cuenta que en el por encima de la primera div pueden no ser necesarios y los márgenes se pueden mover a la segunda div con pocos cambios. Adapte, según sea necesario, los porcentajes o especifique un ancho de píxel y debe estar todo listo. Esperemos que esto le ahorre a alguien algún tiempo en algún momento y no cree ningún problema nuevo. La mejor de las suertes.