Quiero que todo un bloque esté centrado en su padre, pero quiero que el contenido del bloque quede alineado a la izquierda.
Los ejemplos sirven mejor
En esta página :
el arte ascii debe estar centrado (como aparece) pero debe alinearse y verse como "YAML".
O esto :
el mensaje de error debería alinearse como en una consola.
Respuestas:
Primero, cree un padre divque centre su contenido secundario en text-align: center. A continuación, cree un elemento secundario divque se display: inline-blockadapte al ancho de sus elementos secundarios y text-align: lefthaga que el contenido que contiene se alinee a la izquierda como desee.
<div style="text-align: center;">
<div style="display: inline-block; text-align: left;">
Centered<br />
Content<br />
That<br />
Is<br />
Left<br />
Aligned
</div>
</div>Reposicionando la respuesta de trabajo de la otra pregunta: ¿Cómo centrar horizontalmente un elemento flotante de ancho variable?
Suponiendo que el elemento que está flotando y estará centrado es un div con un id = "content" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
Y aplica el siguiente CSS
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Aquí hay una buena referencia sobre eso http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats
prey el "contenido" code.
This will be centeredno cabe en una línea, envuelve el texto y da como resultado que el bloque sea de ancho completo pero el texto sea menor que el ancho completo, por lo que aunque el bloque esté centrado, no importa ya que el el texto NO es el ancho completo del bloque contenedor. Para ver un ejemplo, consulte el diagrama 2a de stackoverflow.com/questions/8702802/… .
Si te entiendo bien, necesitas usar para centrar un contenedor (o bloque)
margin-left: auto;
margin-right: auto;
y para alinear a la izquierda su contenido:
text-align: left;
Normalmente, debe usar margin: 0 auto en el div como se menciona en las otras respuestas, pero tendrá que especificar un ancho para el div. Si no desea especificar un ancho, también puede (esto depende de lo que esté intentando hacer) usar márgenes, algo como margin: 0 200px; , esto debería hacer que tu contenido parezca centrado, también puedes ver la respuesta de Leyu a mi pregunta
Encontré que la forma más fácil de centrar y alinear a la izquierda el texto dentro de un contenedor es la siguiente:
HTML:
<div>
<p>Some interesting text.</p>
</div>
CSS:
P {
width: 50%; //or whatever looks best
margin: auto; //top and bottom margin can be added for aesthetic effect
}
Espero que esto sea lo que estabas buscando, ya que me tomó un poco de búsqueda solo para descubrir esta solución bastante básica.
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
¿Es esto lo que estás buscando? Caja flexible ...
.container{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
}
.inside{
height:100px;
width:100px;
background:gray;
border:1px solid;
}<section class="container">
<section class="inside">
A
</section>
<section class="inside">
B
</section>
<section class="inside">
C
</section>
</section>Esto funciona
<div style="display:inline-block;margin:10px auto;">
<ul style="list-style-type:none;">
<li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
<li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
<li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
<li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
</ul>
</div>