justificar - como centrar un texto en html bloc de notas

¿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 esté centrado, no el bloque en sí.

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

En los ejemplos a continuación, muestro 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 solo una línea y es más pequeño que el ancho máximo del bloque de texto, así que puedo establecer el bloque de texto al ancho del texto y no hay problema.

Sin embargo, en 2a , el texto es más largo que el ancho máximo, por lo que 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 ambas situaciones como 1b y 2b solo usando HTML y CSS?

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

Edición 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 lo cambia a blanco ( http://jsfiddle.net/28aef/2/ ) puede ver cómo el bloque de texto ya no se ve centrado (es decir, los márgenes izquierdo y derecho no son iguales)

Answer 1

Flexbox puede ser bueno para ir:

<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>

<div class="d-flex flex-column mx-auto w-50"> <p>Left aligned text</p> <p><em>Aenean sed lectus massa, quis fringilla magna. Morbiporta sapien quis ligula viverra condimentum non vel nunc. Ut ac pulvinar nibh. Sed vitae eros et purus ullamcorper fermentum eu a libero. Curabitur vitae dolor ligula, varius tincidunt arcu. Quisque lectus magna, semper sed tincidunt nec, mattis vel justo.</em></p> <p>Using <a href="https://getbootstrap.com/docs/4.1/utilities/flex/">Bootstrap 4</a> classes.</p> </div>

Answer 2

Sé que esto es antiguo, pero tuve el mismo problema y estoy de acuerdo en que ninguno de estos lo resuelve. Es posible que este no sea 100% de navegador cruzado (¡no haya hecho pruebas) pero funciona!

Ahora la restricción es que debes ponerte en el salto de línea, pero parece que eso 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

Sé que esto es viejo pero no ha sido respondido. Se puede hacer con calc() vh y vw (unidades de vista), al menos, y algunos cálculos matemáticos. El truco parece ser configurar la izquierda y la parte superior al centro de forma manual. Utilicé unidades de viewport por su precisión y efecto siempre cambiante.

    .clr { clear:both; }
    .bg666 { background:#666;}  
    .bgf4 { background: #f4f4f4; }
    .hv60 { height: 60vh; }
    .hv50 { height: 50vh; }
    .wv60 { width: 60vw; }
    .wv50 { width: 50vw; }
    .tlset { position:relative; left: 30px; top: 30px; }
    .true_cntr_inner { position:relative; left: calc(60vw - 50vw - 5vw);  top: calc(60vh - 50vh - 5vh); } /* left = (60% - 50% of inner block / 2);*/

    <div class = ''clr wv60 hv60 bg666 tlset''>
        <div class = ''clr wv50 hv50 true_cntr_inner bgf4''>
            this is some text that spans acrossed 50% of the viewport. 
            I state the obvious because I believe people can see the obvious and I 
            was wrong a lot. Now it has become somewhat of a habit like bad spelling 
            so forgive me. 
        </div>
    </div>

Estaba buscando una solución para centrar y cambiar el tamaño de mi texto que contiene DIV en el cambio de tamaño de la ventana. Me encontré con esta publicación y encontré mi solución después de darme cuenta de que había un problema con el método CENTRO regular. Espero que ayude.

Answer 4

Supongo que desde hace mucho tiempo no se ha convertido en un problema para el póster original, pero tuve la misma pregunta y estaba buscando en Google una respuesta. A continuación se muestra el resultado de lo que encontré.

Descargo de responsabilidad: no soy un experto en nada de 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é que lo publicaría.

<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 lo anterior puede que no sea necesario el primer div y que los márgenes se puedan mover al segundo div con pocos cambios. Adapte, según sea necesario, a los porcentajes o especifique un ancho de píxel y debe estar todo configurado. Esperemos que esto le ahorre tiempo a alguien en algún momento y no cree nuevos problemas. Mucha suerte a todos.

Answer 5

<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, el primer div es tu elemento que contiene. Necesitas alinear el centro del texto.

Luego, en el bloque div (el área azul), debe mostrar la línea y el texto alineados a la izquierda, luego establecer un margen (el espacio en blanco que desea que permanezca alrededor de él cuando el texto se ajuste).