Home-theater-designers
Um dos primeiros recursos que todos os desenvolvedores aprenderam quando se familiarizaram com o processamento de texto foi o alinhamento do texto. Essa minúscula ferramenta tem sido vital para compositores profissionais e designers amadores de folhetos. Não é nenhuma surpresa que CSS tenha suporte para alinhamento de texto quando se trata de web design.
o alinhamento de texto propriedade, junto com uma ou duas outras, controla como um elemento alinha horizontalmente seu texto. Além do básico, os navegadores estão lentamente implementando mais especificações, mas o suporte completo varia. Aprenda como alinhar o texto e quais recursos os navegadores comuns suportam hoje.
Os princípios básicos da propriedade de alinhamento de texto CSS
Alinhamento é um dos termos tipográficos mais familiares. No contexto de CSS, alinhamento de texto refere-se ao alinhamento horizontal.
O alinhamento de texto horizontal só se aplica a contêineres de bloco. Esses são elementos de largura total, como parágrafos e divs. Usando o alinhamento de texto propriedade em um elemento embutido, como em não terá efeito. Você também pode alinhar itens de lista e células de tabela:
como obter emotes na contração muscular
Por padrão, em um idioma da esquerda para a direita (mais sobre isso depois), o texto é alinhado à esquerda:
Em CSS, é o mesmo que:
p { text-align: left; }Ou:
p { text-align: start; }Relacionado: O que são folhas de estilo em cascata e para que é usado o CSS?
Você pode usar outros valores para o alinhamento de texto propriedade para alterar o alinhamento horizontal. Os valores mais comuns são familiares em aplicativos de processamento de texto:
text-align: left
text-align: center
text-align: rightUse a justificação para alinhar as bordas esquerda e direita
Outro valor comum para alinhamento de texto é justificar . Os navegadores adicionam espaço ao texto justificado para que cada linha se estenda para preencher o espaço disponível:
Quando você justifica o texto, a linha final pode ser complicada. Como pode ser muito curto (possivelmente apenas uma única palavra), espaçá-lo em toda a largura pode ser feio. Por padrão, mesmo o texto justificado alinhará a linha final à esquerda.
como definir a conta do gmail como padrão
Às vezes, você pode querer um efeito diferente. As implementações do navegador estão alcançando as especificações, mas duas abordagens são possíveis.
o justificar tudo O valor deve significar que os navegadores tratam a linha final como todas as outras e esticam-na até a largura total. No entanto, no momento em que este artigo foi escrito, nenhum navegador oferece suporte a esse valor. Você pode verifique Caniuse para ver se eles fazem quando você está lendo este artigo.
Outra propriedade CSS, texto-alinhar-último , é mais flexível e tem melhor suporte. Você pode tratá-lo mais ou menos da mesma forma que alinhamento de texto , mas só se aplica à linha final:
O suporte do navegador para esta propriedade é melhor, mas não perfeito. Novamente, verifique o Caniuse antes de usá-lo . Se um navegador não reconhecer esta propriedade, ele a ignorará.
Alinhamento do Texto e Direção de Leitura
Você pode estar trabalhando com um idioma, como árabe ou hebraico, que é lido da direita para a esquerda. CSS usa o direção propriedade para especificar isso, por exemplo:
direction: rtl;Esses idiomas geralmente alinham o texto à direita por padrão.
Em vez de precisar especificar deixou / direito , a forma preferida de alinhar o texto usa os valores começar e fim . Isso especifica se o texto deve ser alinhado no início de cada linha ou no final. Em idiomas da esquerda para a direita, começar é equivalente a deixou . Em um idioma da direita para a esquerda, o texto começa à direita e termina à esquerda.
não foi possível encontrar o endereço IP do servidor.
Usando começar ou fim significa que, independentemente da direção do texto, o alinhamento é consistente.
Como os elementos herdam a propriedade de alinhamento de texto
Você deve estar ciente de que o alinhamento de texto propriedade herda. Por exemplo, se você configurá-lo no corpo elemento, ele se aplicará a todos os elementos da página. Você pode, é claro, substituí-lo em qualquer elemento.
Usando a propriedade de alinhamento de texto para controlar o layout
Você pode usar o alinhamento de texto Propriedade CSS para definir como os navegadores organizam o texto horizontalmente. Os valores mais comuns são deixou , direito , Centro , e justificar . Eles são bastante simples, embora justificar apresenta alguma complexidade.
Você deve usar o alinhamento do texto com moderação. Em outdoors e pôsteres, o alinhamento central pode ser apropriado, mas pode dificultar a leitura de blocos mais longos de texto. A justificação geralmente é mais legível quando as linhas de texto são mais longas. Justificar colunas curtas de texto pode criar espaçamentos feios.
o alinhamento de texto propriedade é uma das muitas propriedades CSS que fornecem formatação útil e posicionamento básico.
Compartilhado Compartilhado Tweet O email 10 exemplos de código CSS simples que você pode aprender em 10 minutosPrecisa de ajuda com CSS? Experimente estes exemplos básicos de código CSS para começar e, em seguida, aplique-os às suas próprias páginas da web.
Leia a seguir Tópicos relacionados- Programação
- Desenvolvimento web
- Designer de Web
- CSS
Bobby é um entusiasta da tecnologia que trabalhou como desenvolvedor de software por quase duas décadas. Ele é apaixonado por jogos, trabalha como Editor de Críticas na Switch Player Magazine e está imerso em todos os aspectos da publicação online e desenvolvimento web.
Mais de Bobby JackAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever