CSS: bloco central, mas alinhar o conteúdo para a esquerda
Pergunta
Eu quero um bloco inteiro de ser centrado no pai, mas eu quero o conteúdo do bloco a ser alinhado à esquerda.
Os exemplos servem melhor
Nesta página:
a arte ascii deve ser centralizado (como aparece) mas deve alinhar e se parecem com "YAML".
Ou este:
a mensagem de erro deve toda a linha como ele faz em um console.
Solução 2
Reposting a resposta trabalhando do outro pergunta: Como centro horizontalmente um elemento flutuante, de largura variável?
Assumindo que o elemento que é lançada e será centrado é uma div com um id = "content" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
E aplicar a seguinte CSS
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Aqui está uma boa referência sobre essa http: // dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats
Outras dicas
Primeiro, crie um div
pai que centra o seu conteúdo criança com text-align: center
. Em seguida, crie um div
criança que usos display: inline-block
para se adaptar à largura de seus filhos e text-align: left
para tornar o conteúdo que detém alinhar à esquerda como desejado.
<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>
Se eu entendi bem, você precisa usar para centralizar um recipiente (ou bloco)
margin-left: auto;
margin-right: auto;
e para alinhar esquerda o seu conteúdo:
text-align: left;
Normalmente, você deve usar margin: 0 auto sobre a div como mencionado em outras respostas, mas você vai ter que especificar uma largura para a div. Se você não deseja especificar uma largura você poderia (isto é, dependendo do que você está tentando fazer) uso margens, algo como margin: 0 200px; , Este deve fazer o seu conteúdo parece como se está centrado, você também pode ver a resposta de Leyu para minha pergunta
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
É isso que você está procurando? 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>
Eu encontrei a maneira mais fácil para o centro e deixou-align texto dentro de um recipiente é o seguinte:
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 isso é o que você estava procurando, pois me levou bastante um pouco de pesquisa só para descobrir esta solução bastante básico.
Isso 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>