Bom dia, assinantes e leitores desta publicação. Hoje eu quero entrar em detalhes e dizer como centralizar o alinhamento do texto em css. Em alguns artigos anteriores, toquei indiretamente neste tópico, então você tem algum conhecimento nessa área.
No entanto, neste post irei falar sobre todas as maneiras possíveis de alinhar objetos, e também explicarei como recuar e linhas vermelhas em parágrafos. Então, vamos começar a estudar o material!
Html e sua ideia e alinhar
Este método quase nunca é usado, uma vez que foi suplantado pelas ferramentas de folha de estilo em cascata. Saber que tal tag existe, no entanto, não o prejudica.
Quanto à validação (este termo é descrito em detalhes no artigo ""), então a própria especificação html desativa o uso de < centro\u003e, uma vez que para a validade é necessário o uso de um transitório DOCTYPE\u003e.
Esse tipo pula itens proibidos.
Agora vamos passar para o atributo alinhar... Ele define o alinhamento horizontal dos objetos e se ajusta após a declaração da tag. Normalmente, pode ser usado para alinhar o conteúdo à esquerda ( deixou), alinhado à direita ( direita), centrado ( centro) e largura do texto ( justificar).
Abaixo darei um exemplo em que a imagem e o parágrafo serão centralizados.
Este conteúdo será centralizado.
Observe que o atributo que analisamos tem significados ligeiramente diferentes para a imagem.
No exemplo que usei alinhar \u003d "meio "... Isso alinha a imagem para que a frase fique claramente no meio da imagem.
Ferramentas de centralização em css
As propriedades Css para alinhar blocos, texto e conteúdo gráfico são usadas com muito mais frequência. Isso se deve principalmente à conveniência e flexibilidade da implementação de estilos.
Então, vamos começar com a primeira propriedade de centralização do texto - esta é texto-alinhar.
Funciona da mesma forma que alinhar em. Entre as palavras-chave, você pode escolher uma da lista geral ou herdar as características do ancestral ( herdar).
Quero observar que mais 2 parâmetros podem ser definidos no css3: começar - dependendo das regras de escrita do texto (da direita para a esquerda ou vice-versa) define o alinhamento para a esquerda ou direita (semelhante ao trabalho de esquerda ou direita) e fim - oposto ao início (ao escrever texto da esquerda para a direita, atua como direito, ao escrever da direita para a esquerda - esquerda).
Oferta à direita
Frase usando fim
Vou te contar sobre um pequeno truque. Ao escolher um valor justificar a última linha pode balançar feia de baixo. Para posicioná-lo, por exemplo, no centro, você pode usar a propriedade texto-alinhar-último.
Para alinhar o conteúdo do site ou células da tabela verticalmente, use a propriedade alinhamento vertical... Abaixo, descrevi as principais palavras-chave do elemento.
| Palavra-chave | Propósito |
| linha de base | Especifica o alinhamento com a linha ancestral, que é chamada de linha de base. Se o objeto ancestral não tiver essa linha, o alinhamento ocorre de acordo com a borda inferior. |
| meio | O centro do objeto mutável é alinhado à linha de base à qual o piso de altura do elemento pai é adicionado. |
| fundo | A parte inferior do conteúdo selecionado se ajusta à parte inferior do objeto abaixo de tudo. |
| topo | Semelhante ao fundo, mas com a parte superior do objeto. |
| super | Torna um caractere sobrescrito. |
| sub | Desce o elemento. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
C NOE TCERCA DEPARA
|
Recuo
E, finalmente, chegamos ao recuo no parágrafo. A linguagem css usa uma propriedade especial chamada text-indent.
Com ele, você pode fazer uma linha vermelha e uma borda (você precisa especificar um valor negativo).
Para criar uma linha vermelha, você só precisa saber um parâmetro.
Esta é a propriedade text-indent simples.
O tutorial de hoje é sobre como alinhar divs com CSS no centro.
Existem vários pontos aqui que não são totalmente fáceis de perceber. Eu gostaria de me debruçar sobre um deles hoje.
Quando os blocos estão em fluxo normal, não é difícil alinhar um, no centro, em relação ao bloco pai no qual está localizado.
Para isso, a construção CSS padrão é usada.
Mas, e se o bloco a ser centrado tiver uma posição absoluta ou fixa. Essa situação às vezes acontece.
Aqueles. neste caso, nosso exemplo assume a seguinte forma.
posição: relativa; - o bloco pai foi adicionado para que a contagem regressiva vá a partir dele, e não da tag
posição: absoluta; - a rigor, o próprio posicionamento absoluto.
Após a manipulação, margin: auto para de funcionar.
Como ser? Como você pode centralizar o bloco novamente?
Hoje vou apresentar um truque que é usado neste caso. Na verdade, é muito simples, você só precisa adicionar duas propriedades CSS para o bloco se alinhar.
esquerda: 50%; - deslocamos o bloco em relação ao pai em 50% para a esquerda.
margem esquerda: -150px; - Desde a contando a partir da borda superior esquerda do bloco, para obter uniformidade completa, metade do bloco precisa ser deslocada para a esquerda, o que fazemos com um recuo negativo.
Se a largura do bloco for especificada como uma porcentagem, então a solução poderia ser a seguinte:
Se você precisar centralizar uma linha com o texto:
A questão é que quando um bloco é atribuído a uma propriedade com posição: absoluto. A largura do bloco com a largura padrão: auto torna-se igual ao conteúdo. Portanto, a propriedade text-align não funcionará. Para que tudo comece a funcionar, é necessário forçar o aumento da largura para 100%.
Ao fazer o layout de uma página, geralmente é necessário realizar o alinhamento central de maneira CSS: por exemplo, centralize o bloco principal. Existem várias opções para resolver este problema, cada uma das quais, mais cedo ou mais tarde, deve ser usada por qualquer designer de layout.
Alinhamento ao centro do texto
Freqüentemente, para fins decorativos, é necessário definir o alinhamento do texto no centro, CSS neste caso permite reduzir o tempo de layout. Anteriormente, isso era feito usando atributos HTML, mas agora o padrão requer alinhamento de texto usando folhas de estilo. Ao contrário das caixas, para as quais é necessário alterar as margens, no CSS, o alinhamento central do texto é feito com uma única linha:
- alinhamento de texto: centro;
Esta propriedade é herdada e passada de pai para todos os descendentes. Afeta não só o texto, mas também outros elementos. Para fazer isso, eles devem ser inline (como span) ou inline-block (quaisquer blocos que tenham a propriedade display: block definida). A última opção também permite alterar a largura e a altura do elemento, ajustar os recuos com mais flexibilidade.
Freqüentemente, nas páginas, o alinhamento é atribuído à própria tag. Isso torna o código imediatamente inválido, pois o atributo align foi preterido pelo W3C. Não é recomendável usá-lo na página.
Alinhando um bloco ao centro
Se você precisa definir o div como centralizado, o CSS pode oferecer uma maneira bastante prática: usando as margens. Indentações podem ser definidas para elementos de bloco e elementos de bloco embutido. O valor da propriedade deve ser 0 (recuos verticais) e auto (recuos automáticos horizontais):
- margem: 0 automático;
Agora, esta opção particular é reconhecida como absolutamente válida. O uso de preenchimento externo também permite definir o alinhamento central da imagem: permite resolver muitos problemas associados ao posicionamento de um elemento na página.
Alinha um bloco à esquerda ou direita
Às vezes, o alinhamento CSS não é necessário, mas você precisa colocar dois blocos lado a lado: um à esquerda e outro à direita. Para fazer isso, existe a propriedade float, que pode assumir um de três valores: esquerda, direita ou nenhum. Digamos que você tenha dois blocos que precisam ser colocados lado a lado. Então, o código será assim:
- .esquerda (flutuar: esquerda;)
- .right (float: right)
Se houver também um terceiro bloco que deve estar localizado sob os dois primeiros blocos (por exemplo, um rodapé), ele precisa registrar a propriedade clear:
- .esquerda (flutuar: esquerda;)
- .right (float: right)
- rodapé (limpar: ambos)
O fato é que blocos com classes esquerda e direita saem do fluxo geral, ou seja, todos os outros elementos ignoram a própria existência de elementos alinhados. A propriedade clear: both permite que o rodapé ou qualquer outro bloco veja itens fora do fluxo e não permite a flutuação à esquerda e à direita. Portanto, em nosso exemplo, o rodapé se moverá para baixo.
Alinhamento vertical
Há momentos em que não é suficiente definir o alinhamento central usando métodos CSS, você também precisa alterar a posição vertical do bloco filho. Qualquer elemento embutido ou bloco embutido pode ser fixado na borda superior ou inferior, no meio do elemento pai ou em qualquer lugar. Na maioria das vezes, o alinhamento do bloco no centro é necessário; para isso, o atributo de alinhamento vertical é usado. Digamos que haja dois blocos, um aninhado dentro do outro. O bloco interno é um elemento de bloco embutido (display: bloco embutido). Você precisa alinhar o bloco filho verticalmente:
- alinhamento superior - .child (alinhamento vertical: superior);
- alinhamento do centro - .child (vertical-align: middle);
- alinhamento inferior - .child (alinhamento vertical: inferior);
Nem o alinhamento de texto nem o alinhamento vertical afetam os elementos do bloco.
Possíveis problemas com blocos alinhados
Às vezes, alinhar um div ao centro de uma forma CSS pode causar pequenos problemas. Por exemplo, para usando float: Digamos que haja três blocos: .primeiro, .segundo e .terceiro. O segundo e o terceiro blocos estão no primeiro. O elemento com a classe segundo é alinhado à esquerda e o último bloco é alinhado à direita. Após o alinhamento, ambos caíram do riacho. Se o elemento pai não tiver uma altura especificada (por exemplo, 30em), ele irá parar de se esticar ao longo da altura dos blocos filhos. Para evitar esse erro, use um "espaçador" - um bloco especial que vê .segundo e .terceiro. Código CSS:
- .second (float: left)
- .terceiro (flutuar: direita)
- .clearfix (altura: 0; claro: ambos;)
A pseudo classe: after é frequentemente usada, o que também permite que você coloque blocos de volta no lugar criando um pseudo-layout (no exemplo, um div com uma classe de contêiner está dentro de .first e contém .left e .right):
- .esquerda (flutuar: esquerda)
- .right (float: right)
- .container: after (content: ""; display: table; clear: both;)
As opções acima são as mais comuns, embora existam várias variações. Você sempre pode encontrar a maneira mais fácil e conveniente de criar um pseudo-layout por meio de experimentação.
Outro problema que os designers de layout frequentemente enfrentam é o alinhamento de elementos de bloco embutido. Um espaço é adicionado automaticamente após cada um deles. A propriedade de margem ajuda a lidar com isso, que é definido como uma margem negativa. Existem outros métodos que são usados \u200b\u200bcom muito menos frequência: por exemplo, zerar Nesse caso, font-size: 0 é escrito nas propriedades do elemento pai. Se houver texto dentro dos blocos, o tamanho da fonte necessário já será retornado nas propriedades dos elementos do bloco embutido. Por exemplo, font-size: 1em. O método nem sempre é conveniente, portanto a opção com recuos externos é muito mais usada.
Blocos de alinhamento permitem que você crie páginas bonitas e funcionais: este é o layout do layout geral e a localização das mercadorias em lojas online e fotos em um site de cartão de visita.
Uma tarefa
Alinha um elemento de bloco da largura especificada ao centro horizontal da página da web.
Decisão
Largura padrão elemento de bloco assume o valor auto e geralmente ocupa toda a largura disponível. Portanto, usando o método descrito, você pode alinhar ao centro apenas um elemento que tenha uma largura explícita em porcentagem ou pixels. Depois disso, a margem esquerda (propriedade de estilo margin-left) e a margem direita (margin-right) com o valor auto devem ser adicionadas ao estilo da camada. No entanto, você também pode usar a propriedade de margem genérica com o valor automático (exemplo 1).
Exemplo 1. Alinhando uma camada ao centro
HTML5 CSS 2.1 IE Cr Op Sa Fx
O resultado do exemplo é mostrado na Fig. 1.
Muitas vezes, a tarefa é alinhar o bloco ao centro da página / tela, e mesmo assim sem um script java, sem definir tamanhos rígidos ou margens negativas, de forma que as barras de rolagem funcionem para o pai se o bloco ultrapassar seu Tamanho. Existem muitos exemplos monótonos na web de como alinhar um bloco ao centro da tela. Via de regra, a maioria deles se baseia nos mesmos princípios.
Abaixo estão as principais formas de resolver o problema, seus prós e contras. Para entender a essência dos exemplos, recomendo diminuir a altura / largura da janela Resultado nos exemplos nos links indicados.
Opção 1. Recuo negativo.
Posicionamento quadra atributos top e left em 50%, e sabendo de antemão a altura e largura do bloco, definimos uma margem negativa, que é igual a metade do tamanho quadra... A grande desvantagem dessa opção é que você precisa calcular as margens negativas. Mesmo quadra não se comporta corretamente quando rodeado por barras de rolagem - é simplesmente cortado porque tem margens negativas.
Pai (largura: 100%; altura: 100%; posição: absoluto; topo: 0; esquerda: 0; estouro: automático;) .block (largura: 250px; altura: 250px; posição: absoluta; topo: 50%; esquerda : 50%; margem: -125px 0 0 -125px; img (largura máxima: 100%; altura: automático; exibição: bloco; margem: 0 automático; borda: nenhum;))
Opção 2. Recuo automático.
Menos comum, mas semelhante ao primeiro. Pra quadra defina a largura e a altura, posicione os atributos superior direito inferior esquerdo como 0 e defina a margem automática. A vantagem desta opção são as barras de rolagem funcionando em paise o último tiver 100% de largura e altura. A desvantagem deste método é o dimensionamento rígido.
Pai (largura: 100%; altura: 100%; posição: absoluto; topo: 0; esquerda: 0; estouro: automático;) .block (largura: 250px; altura: 250px; posição: absoluto; topo: 0; direita: 0; inferior: 0; esquerda: 0; margem: automático; img (largura máxima: 100%; altura: automático; exibição: bloquear; margem: 0 automático; borda: nenhum;))
Opção 3. Tabela.
Nós perguntamos pai estilos de tabela, célula pai defina o alinhamento do texto ao centro. E quadra definir o modelo de bloco de linha. Os contras que obtemos não são barras de rolagem que funcionam e, em geral, não a estética da "emulação" da mesa.
Parent (largura: 100%; altura: 100%; display: table; position: absoluto; top: 0; left: 0;\u003e .inner (display: table-cell; text-align: center; vertical-align: middle; )) .block (display: inline-block; img (display: block; border: none;))
Para adicionar um pergaminho a este exemplo, você deve adicionar mais um elemento à construção.
Exemplo: jsfiddle.net/serdidg/fk5nqh52/3.
Opção 4. Pseudo-elemento.
Esta opção é desprovida de todos os problemas listados nos métodos anteriores e também resolve as tarefas originalmente definidas. O resultado final é que pai definir estilos pseudo-elemento antes, ou seja, 100% de altura, alinhamento central e modelo de bloco em linha. É o mesmo com quadra o modelo do bloco de linha é definido, alinhamento central. Para quadra não "caiu" em pseudo-elementoquando o tamanho do primeiro é maior que pai, indicar pai espaço em branco: nowrap e font-size: 0 seguido por quadra substitua esses estilos com o seguinte - espaço em branco: normal. Neste exemplo, font-size: 0 é necessário para remover o espaço resultante entre pai e quadra devido à formatação do código. O espaço pode ser removido de outras maneiras, mas o melhor é simplesmente não permitir.
Pai (largura: 100%; altura: 100%; posição: absoluto; topo: 0; esquerda: 0; overflow: auto; espaço em branco: nowrap; alinhamento do texto: centro; tamanho da fonte: 0; &: before ( altura: 100%; display: inline-block; vertical-align: middle; content: "";)) .block (display: inline-block; white-space: normal; vertical-align: middle; text-align: left ; img (display: block; border: none;))
Ou, se você precisa que o pai ocupe apenas a altura e largura da janela, e não a página inteira:
Parent (position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &: before (height: 100%; display: inline-block; vertical-align: middle; content: "";)) .block (display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img (exibir: bloquear; borda: nenhum;))
Opção 5. Flexbox.
Uma das maneiras mais simples e elegantes é usar o flexbox. Ele não requer movimentos corporais desnecessários, descreve com bastante clareza a essência do que está acontecendo e possui alta flexibilidade. A única coisa a lembrar ao escolher este método é o suporte do IE da versão 10 inclusive. caniuse.com/#feat\u003dflexbox
Pai (largura: 100%; altura: 100%; posição: fixa; superior: 0; esquerda: 0; display: flex; alinhar-itens: centro; alinhar-conteúdo: centro; justificar-conteúdo: centro; estouro: automático; ) .block (background: # 60a839; img (display: block; border: none;))
Opção 6. Transformar.
Adequado se estivermos limitados pela estrutura e não houver maneira de manipular o elemento pai e o bloco precisar ser alinhado de alguma forma. A função css translate () vem ao resgate. Em 50%, o posicionamento absoluto posicionará o canto superior esquerdo da caixa exatamente no centro, então um valor de translação negativo moverá a caixa em relação ao seu próprio tamanho. Esteja ciente de que os efeitos negativos podem aparecer na forma de bordas borradas ou estilo de fonte. Além disso, este método pode levar a problemas com o cálculo da posição do bloco usando java-script "a. Às vezes, para compensar a perda de 50% da largura devido ao uso da propriedade css left, a regra definida para o bloco pode ajuda: margem direita: -50% ;.
Pai (largura: 100%; altura: 100%; posição: fixa; topo: 0; esquerda: 0; estouro: automático;) .block (posição: absoluto; topo: 50%; esquerda: 50%; transformar: traduzir ( -50%, -50%); img (exibir: bloquear;))
Opção 7. Botão.
Opção do usuário onde quadra está enquadrado na tag do botão. O botão tem a capacidade de centralizar tudo dentro dele, nomeadamente os elementos dos modelos inline e inline-block. Na prática, não recomendo usá-lo.
Pai (largura: 100%; altura: 100%; posição: absoluto; topo: 0; esquerda: 0; estouro: automático; plano de fundo: nenhum; borda: nenhum; contorno: nenhum;) .block (exibição: bloco embutido; img (display: block ;; border: none;))
Bônus
Usando a ideia da 4ª opção, é possível definir margens para quadra, e o último será exibido adequadamente cercado por barras de rolagem.Exemplo: jsfiddle.net/serdidg/nfqg9rza/2.
Você também pode alinhar a imagem no centro, e se a imagem for maior pai, dimensione para caber pai.
Exemplo: jsfiddle.net/serdidg/nfqg9rza/3.
Exemplo com uma imagem grande:
