(dica) alterando alinhamento de texto
Índice
Zero
Por padrão o Bear Blog usa a lógica de alinhamento para a esquerda. ~mother Russia intensifies~
Mas e se você quiser alinhar o texto de outra forma, como faz?
Simples! Usando a tag de parágrafo.
Como funciona no HTML
Por padrão, no Markdown a gente só vai escrevendo e coloca dá dois enters entre parágrafos para criar uma separação de linhas.
No HTML, podemos usar a tag <p> para isso, mas essa tag por si só (ou seja, sem nenhuma personalização) não é tão necessária, já que fazer parágrafos em markdown é bem fácil. O que a torna interessante é o fato de que podemos colocar atributos nela.
Por exemplo, se eu quero centralizar um texto, só preciso fazer:
<p style="text-align:center;"> Estou na meiuca </p>
E com isso o resultado vai ser:
Estou na meiuca
Basicamente quando criamos a tag <p> e associamos um style a ela, tudo o que está dentro das aspas vai ser aplicado naquela parte do texto até o próximo fechamento (a tag </p>). Nesse caso, é o atributo de "text-align", que fornece o alinhamento de texto, como o nome já deixa em evidência.
Para outros alinhamentos, você vai aplicar a mesma lógica:
<p style="text-align:justify;"> Assim você justifica o parágrafo, então seus textões não vão ficar com aquela quebra de linha que certas pessoas acham feio (sem julgamento, viu!) </p>
Que fica como:
Assim você justifica o parágrafo, então seus textões não vão ficar com aquela quebra de linha que certas pessoas acham feio (sem julgamento, viu!)
Para fazer o alinhamento à direita você usaria o mesmo código, mas trocando o valor por right no lugar de center/justify.
E se for mutcho texto?
Se você for palestrinha, sem problema, nesse caso podemos utilizar uma tag <div> e manter os <p> apenas para separação.
Não entendeu? Beleza, explico a diferença:
A tag <div> é um jeito fácil da gente organizar elementos no HTML. Nesse caso, vou usá-la por pura preguiça de organizar inúmeros <p> com seus próprios style. É mais fácil criar uma div só com essa configuração.
Com um exemplo deve ficar mais fácil de entender.
<div style="text-align:center;">
Digamos que eu queira fazer um texto com várias linhas!
Mas eu só criei uma div, sem dar nenhuma tag de p.
O resultado vai ficar assim, mesmo que no código em si eu tenha pulado linhas, pois a div é considerada um elemento só.
</div>
O resultado:
Não ficou legal assim, né? Por isso a gente configura a div e para cada parágrafo criamos sua própria tag de p.
Funciona assim:
<div style="text-align:center;">
<p>Digamos que eu queira fazer um texto com várias linhas!</p>
<p>Agora eu criei uma div, onde cada parágrafo que desejo demarcar eu coloco uma tag de p. Sempre lembrando de fechá-la, claro, senão a linha seguinte vai ser considerada como o mesmo elemento.</p>
<p>Bem melhor, né?</p>
</div>
O resultado:
Digamos que eu queira fazer um texto com várias linhas!
Agora eu criei uma div, onde cada parágrafo que desejo demarcar eu coloco uma tag de p. Sempre lembrando de fechá-la, claro, senão a linha seguinte vai ser considerada como o mesmo elemento.
Bem melhor, né?
Outro exemplo, com múltiplas linhas dentro de uma só div:
<div style="text-align:right;">
<p>A linha acima ficou um parágrafo grandão porque escolhi fazer assim, mas se eu quiser </p>
<p>posso colocar</p>
<p>até</p>
<p>uma</p>
<p>palavra</p>
<p>só!</p>
<p>(Ok, cansei, você entendeu!)</p>
</div>
Resultado:
A linha acima ficou um parágrafo grandão porque escolhi fazer assim, mas se eu quiser
posso colocar
até
uma
palavra
só!
(Ok, cansei, você entendeu!)
Dica de ouro
Lembre-se:
Mil cairão à tua direita, dez mil ao teu lado, mas você FECHARÁ cada tag que abrir, haja o que hajar!
Só para não correr o risco de se perder, já crie a tag de fechamento junto com a tag de abertura. ;) Não precisa me agradecer.
Extra
A configuração de style pode conter quantos atributos você quiser, contanto que você os separe com ponto e vírgula sempre! Se eu quiser fazer um texto em itálico, por exemplo, só preciso colocar o atributo font-style:
<p style="text-align:center;font-style:italic;">Daí o negócio fica assim!</p>
Resultado:
Daí o negócio fica assim!
Por hoje é só, pessoal! \o