Mova o botão CSS para a direita
Alinhamento refere -se ao posicionamento de algo de uma maneira particular, que pode ser texto ou botões. O alinhamento do botão refere -se a como você deseja posicionar seus botões, eu.e. À esquerda, direita ou no centro da página da web.
Este artigo discutirá o uso do CSS para alinhar um botão à direita. Várias propriedades CSS estão disponíveis para o texto ou posicionamento do botão. Podemos fazer isso usando a propriedade Float, a propriedade de alinhamento de texto e a propriedade de conteúdo justificado.
Propriedade flutuar para alinhar o botão à direita
A propriedade Float CSS determina como os dados estão estruturados e posicionados em uma página da web.
Primeiro temos que criar um botão no arquivo html. Utilizamos o editor de texto sublime para colocar esta ilustração em prática. O código HTML para criar um botão simples é mostrado na imagem a seguir:
Neste código, criamos um botão no arquivo html. Utilizamos a tag que é usada como um recipiente para embrulhar os elementos html dentro dela. Os atributos "Div Classe" são usados para estilizar o arquivo HTML com CSS. Adicionamos um texto exibido no botão.
Você pode ver o botão que acabamos de criar e exibir no lado esquerdo da página por padrão.
Agora, a próxima coisa que precisamos fazer é posicionar este botão no canto direito da página. O script CSS é utilizado para realizar isso. O botão é colocado à direita usando o atributo de flutuação CSS. O ".Button_btn ”refere -se à classe Div que criamos no código HTML para fazer um botão. Agora, podemos acessar e aplicar o design ao botão criado dentro deste contêiner. Usamos a propriedade "Float" e definimos seu valor como "certo". Ele nos fornece alguns valores - nenhum, direito, esquerda, inicial e herdado. Como pretendemos posicionar o botão à direita, portanto, empregamos o valor "certo" para a propriedade Float em CSS.
O script anterior, quando executado, produz a saída que é mostrada na imagem a seguir. O botão é colocado à direita da tela quando o valor da propriedade float é definido como "certo".
Propriedade de alinhamento de texto para alinhar o botão à direita
A próxima propriedade que usamos para alinhar um botão à direita é a propriedade "Alinhamento de texto" no CSS. Criamos um arquivo html. Dentro da etiqueta do html, criamos um título mostrado na parte superior da página da web usando o
marcação. Então, criamos um botão dentro da aula. Defina um texto exibido no botão.
Isso nos fará com que a página de saída seja apresentada na imagem. O texto que adicionamos é exibido no canto superior direito da página enquanto logo abaixo dele é o botão que criamos.
Para mover este botão que criamos no código anterior para o lado direito da página, exercemos a propriedade "Text-Align". Utilizamos o "alinhamento de texto" no script CSS. O código CSS é dado abaixo:
A propriedade de alinhamento de texto é usada para posicionar o elemento nas diferentes direções. Esta propriedade nos fornece certos valores para posicionar os elementos, incluindo esquerda, direita, centro, inicial, herdar e justificar. Como queremos que o botão seja posicionado no canto direito da página da web, utilizamos o valor "certo" para a propriedade "Text-align" no CSS.
Agora, trabalhamos com o script CSS para estilizar o botão que criamos no arquivo HTML. O ".”Refere -se à classe div que criamos em HTML, seguida pelo nome da classe. Este é o nosso exemplo de um "botão". Isso nos permite estilizar o elemento dentro da classe mencionada. A propriedade "Text-Align" está definida para o valor "direito" para alinhar o botão ao canto direito da página da web.
Você pode ver como a aplicação simples da propriedade "Alinhamento de texto" ajuda você no alinhamento do botão na posição desejada. Para nossas necessidades, ajustamos -o à direita e a imagem de saída mostra um botão com o texto "Pressione o cursor" alinhado no lado direito.
Justify-Content Property para alinhar o botão à direita
A última propriedade que executaremos para alinhar o botão ao canto direito é a propriedade "Justify-Content". Nos casos anteriores, a primeira coisa que fizemos foi criar um arquivo html. Você pode fazê -lo em qualquer editor de texto ou Visual Studio; Nós implementamos no editor de texto sublime.
No arquivo html, dentro da tag, criamos um título primeiro com o
marcação. Então, criamos um dummy dados usando o
marcação. O
A tag é usada quando escrevemos os parágrafos em html. Nós então começamos o . Em um documento HTML, a tag div designa uma partição ou segmento. Os elementos HTML são colocados dentro da tag "Div" e, em seguida, o estilo CSS é aplicado. Especificamos o nome da classe Div "Dummy_Btn". Nós estilizamos o botão no CSS usando este nome de classe. Posteriormente, dentro da tag de botão, definimos o "Tipo de botão" e "Classe de botão", adicionalmente. Adicionamos o texto que aparece no botão.
Esta imagem exibe um título e um parágrafo. Na parte inferior deste conteúdo, um botão que criamos no HTML é exibido.
Agora, estilizamos este botão com o script CSS usando a propriedade "Justify-Content". No script CSS, iniciamos a tag "estilo". Dentro da tag de estilo, temos o “.dummy-btn ”para estilizar o botão que criamos na classe div com este nome. Dentro do aparelho, usamos a “exibição: flex”. Para utilizar um Flexbox, um contêiner flexível deve ter o atributo flexível. O comprimento ajustável para os itens ajustáveis é especificado através da propriedade Flex. Em seguida, definimos a propriedade Justify-Content.
A saída do trecho de código gerado anteriormente é mostrado na imagem a seguir:
Conclusão
Neste artigo, discutimos as três propriedades CSS para alinhar o botão à posição desejada. Utilizamos a propriedade Float, a propriedade de alinhamento de texto e a propriedade Justify-Content. Cada uma das propriedades mencionadas é explicada em detalhes com os códigos HTML e CSS. Implementamos o código de exemplo usando o Sublime Text Editor. Ao utilizar as várias propriedades, este tutorial simplifica o alinhamento dos botões no CSS.