Como posso alinhar verticalmente elementos em uma div

Ao escrever documentos HTML, geralmente adicionamos alguns elementos como imagens, parágrafos e ícones. Às vezes, torna -se complicado alinhar os elementos corretamente. Uma tag div em html é usada como um contêiner em um documento HTML. Ao escrever um programa HTML, inserimos principalmente imagens, texto e ícones em uma tag div. Existem diferentes métodos que ajudam a alinhar os elementos div, verticalmente ou horizontalmente.

Neste post, discutiremos algumas das maneiras mais fáceis de alinhar os elementos verticalmente em um div usando HTML e CSS.

Através da propriedade de altura de linha

Uma das maneiras mais fáceis de alinhar os elementos da div é adicionar uma propriedade de altura de linha no elemento de estilo CSS. Se houver elementos no atributo DIV ID, eles poderão ser alinhados após a adição no elemento de estilo CSS:

No elemento de estilo, use o seletor de ID do CSS (#ID). Adicione a propriedade de altura de linha e defina altura em pixels (px):

Adicionar a propriedade de altura de linha e a altura definidora ajusta os elementos de contêiner de Div, de forma que ela cria a distância entre as linhas verticalmente de acordo com o valor definido pelo usuário. Por exemplo, se o valor da altura da linha no código fosse 30px em vez de 15px, a distância entre os elementos da div teria sido maior. O seguinte será a saída deste código com uma distância de altura da linha de 15px:

Os elementos foram alinhados verticalmente usando a propriedade CSS de altura da linha.

Através da propriedade de preenchimento

Para alinhar elementos verticalmente em uma classe div, há outro método fácil. Os elementos podem ser alinhados verticalmente com facilidade adicionando a propriedade de preenchimento:

No elemento de estilo CSS, basta adicionar a propriedade de preenchimento com um valor em pixels e adicionar peso na borda:

#demo img
preenchimento: 5px 0;
Border: 2px Solid #5C34EB;

Ele criará preenchimento em torno de cada elemento da div e exibirá a seguinte saída:

No elemento div acima, tudo o que fizemos é adicionar uma propriedade de preenchimento No seletor de identificação mencionado no elemento de estilo CSS.

Estes eram os dois métodos fáceis para alinhar os elementos em uma div verticalmente.

Conclusão

Para alinhar o elemento div verticalmente, existem muitos métodos simples, como adicionar uma propriedade de altura de linha no elemento de estilo CSS usando um seletor de identificação referente ao atributo DIV ID ou adicionando uma propriedade de preenchimento no seletor de ID no elemento de estilo CSS. Este artigo explicou bem como alinhar os elementos div verticalmente.