separar - CSS: bloque central, pero alinea contenidos a la izquierda
lineas horizontales para separar parrafos en html (8)
Quiero que todo el bloque esté centrado en su elemento primario, pero quiero que el contenido del bloque quede alineado a la izquierda.
Ejemplos sirven mejor
En esta página :
el arte ascii debe estar centrado (como parece) pero debe estar alineado y parecer "YAML".
O esto :
el mensaje de error debería estar alineado como lo hace en una consola.
¿Es esto lo que estás buscando? Flexbox ...
.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>
He encontrado 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 costó bastante buscar solo para encontrar esta solución bastante básica.
Normalmente, debe usar el margen: 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 podría (esto depende de lo que esté tratando de hacer) usar márgenes, algo como el margen: 0 200px; , esto debería hacer que tu contenido parezca como si estuviera centrado, también podrías ver la respuesta de Leyu a mi pregunta
Si te entiendo bien, necesitas usarlo para centrar un contenedor (o bloque)
margin-left: auto;
margin-right: auto;
y para alinear a la izquierda sus contenidos:
text-align: left;
Volver a publicar la respuesta de trabajo de la otra pregunta: ¿Cómo centrar horizontalmente un elemento flotante de un ancho variable?
Suponiendo que el elemento que está flotando y estará centrado es un div con id = "contenido" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
Y aplicar 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
Primero, cree un div padre que text-align: center su contenido secundario con text-align: center . A continuación, cree un div hijo que use display: inline-block para adaptarse al ancho de sus hijos y text-align: left para 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>
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>