Sposta il pulsante CSS a destra
L'allineamento si riferisce al posizionamento di qualcosa in un modo particolare, che può essere testo o pulsanti. L'allineamento dei pulsanti si riferisce a come si desidera posizionare i pulsanti, io.e. a sinistra, a destra o al centro della pagina web.
Questo articolo discuterà dell'uso di CSS per allineare un pulsante a destra. Sono disponibili varie proprietà CSS per il posizionamento del testo o del pulsante. Possiamo farlo utilizzando la proprietà float, la proprietà allineata dal testo e la proprietà di giustificare il contenuto di contenuti.
Float Property per allineare il pulsante a destra
La proprietà Float CSS determina come i dati sono strutturati e posizionati su una pagina Web.
Dobbiamo prima creare un pulsante nel file HTML. Utilizziamo l'editor di testo sublime per mettere in pratica questa illustrazione. Il codice HTML per creare un pulsante semplice è mostrato nella seguente immagine:
In questo codice, abbiamo creato un pulsante nel file HTML. Abbiamo utilizzato il tag che viene utilizzato come contenitore per avvolgere gli elementi HTML al suo interno. Gli attributi "Div Class" vengono utilizzati per modellare il file HTML con CSS. Abbiamo aggiunto un testo che viene visualizzato sul pulsante.
Puoi vedere il pulsante che abbiamo appena creato e visualizzato sul lato sinistro della pagina per impostazione predefinita.
Ora, la prossima cosa che dobbiamo fare è posizionare questo pulsante nell'angolo destro della pagina. Lo script CSS viene utilizzato per raggiungere questo obiettivo. Il pulsante è posizionato a destra usando l'attributo Float CSS. IL ".Button_btn "si riferisce alla classe Div che abbiamo creato nel codice HTML per creare un pulsante. Ora possiamo accedere e applicare il design al pulsante creato all'interno di questo contenitore. Usiamo la proprietà "float" in essa e impostiamo il suo valore su "giusto". Ci fornisce alcuni valori: nessuno, destro, sinistro, iniziale e ereditario. Dal momento che intendiamo posizionare il pulsante a destra, pertanto, utilizziamo il valore "giusto" per la proprietà float in CSS.
Lo script precedente, quando eseguito, produce l'output che viene mostrato nella seguente immagine. Il pulsante è posizionato a destra dello schermo quando il valore della proprietà float è impostato su "a destra".
Proprietà allineata al testo per allineare il pulsante a destra
La proprietà successiva che utilizziamo per allineare un pulsante a destra è la proprietà "allineate al testo" in CSS. Abbiamo creato un file HTML. All'interno del tag dell'HTML, abbiamo creato un'intestazione che viene mostrata nella parte superiore della pagina web usando il
etichetta. Quindi, abbiamo creato un pulsante all'interno della classe. Definisci un testo che viene visualizzato sul pulsante.
Questo ci porterà la pagina web di output presentata nell'immagine. Il testo che abbiamo aggiunto viene visualizzato nell'angolo in alto a destra della pagina mentre proprio sotto è il pulsante che abbiamo creato.
Per spostare questo pulsante che abbiamo creato nel codice precedente sul lato destro della pagina, esercitiamo la proprietà "allineate al testo". Utilizziamo il "allineamento del testo" nello script CSS. Il codice CSS è riportato di seguito:
La proprietà allineata al testo viene utilizzata per posizionare l'elemento nelle diverse direzioni. Questa proprietà ci fornisce determinati valori per posizionare gli elementi tra cui sinistra, destra, centro, iniziale, eredità e giustifica. Dato che vogliamo che il pulsante sia posizionato nell'angolo destro della pagina web, utilizziamo il valore "giusto" per la proprietà "allineate al testo" in CSS.
Ora lavoriamo con lo script CSS per modellare il pulsante che abbiamo creato nel file HTML. IL "."Si riferisce alla classe Div che abbiamo creato in HTML, seguito dal nome della classe. Questo è il nostro esempio di "pulsante". Questo ci consente di modellare l'elemento all'interno della classe menzionata. La proprietà "allineate al testo" è impostata sul valore "a destra" per fare allineamento al pulsante all'angolo destro della pagina web.
Puoi vedere come la semplice applicazione della proprietà "allineamento di testo" ti aiuta nell'allineamento del pulsante nella posizione desiderata. Per le nostre esigenze, l'abbiamo regolato a destra e l'immagine di uscita mostra un pulsante con testo "Premere cursore" allineato sul lato destro.
Giustifica la proprietà del contenuto di allineare il pulsante a destra
L'ultima proprietà che eseguiremo per ottenere il pulsante allineato all'angolo destro è la proprietà "giustificata". Nei casi precedenti, la prima cosa che abbiamo fatto è stato creare un file HTML. Puoi farlo in qualsiasi editor di testo o Visual Studio; Lo implementiamo su Sublime Text Editor.
Nel file HTML, all'interno del tag, abbiamo prima creato un'intestazione con il
etichetta. Quindi, abbiamo creato un dati fittizio utilizzando il
etichetta. IL
Il tag viene utilizzato quando scriviamo i paragrafi in HTML. Abbiamo quindi iniziato il . In un documento HTML, il tag DIV designa una partizione o un segmento. Gli elementi HTML sono posizionati all'interno del tag "div" e quindi viene applicato lo stile CSS. Abbiamo specificato il nome della classe Div "Dummy_btn". Accogliamo il pulsante in CSS usando questo nome di classe. Successivamente, all'interno del tag del pulsante, abbiamo definito il "tipo di pulsante" e "classe pulsante", inoltre. Abbiamo aggiunto il testo che appare sul pulsante.
Questa immagine mostra un'intestazione e un paragrafo. Nella parte inferiore di questo contenuto, viene visualizzato un pulsante che abbiamo creato in HTML.
Ora, modelliamo questo pulsante con lo script CSS usando la proprietà "giustificati-contenuti". Nello script CSS, abbiamo avviato il tag "stile". All'interno del tag di stile, abbiamo il ".Dummy-Btn "per modellare il pulsante che abbiamo creato nella classe Div con questo nome. All'interno delle parentesi graffe, abbiamo usato il "display: flex". Per utilizzare un Flexbox, un contenitore Flex deve avere l'attributo Flex display. La lunghezza regolabile per gli elementi regolabili è specificata tramite la proprietà Flex. Abbiamo quindi impostato la proprietà giustificata.
L'output del frammento di codice precedentemente generato è mostrato nella seguente immagine:
Conclusione
In questo articolo, abbiamo discusso delle tre proprietà CSS per allineare il pulsante alla posizione desiderata. Abbiamo utilizzato la proprietà float, la proprietà allineata dal testo e la proprietà giustificata. Ciascuna delle proprietà menzionate è spiegata in dettaglio con i codici HTML e CSS. Abbiamo implementato il codice di esempio utilizzando l'editor di testo sublime. Utilizzando le diverse proprietà, questo tutorial rende semplice l'allineamento dei pulsanti in CSS.