Przesuń przycisk CSS w prawo
Wyrównanie odnosi się do pozycjonowania czegoś w określony sposób, co może być tekstem lub przyciskami. Wyrównanie przycisków odnosi się do tego, jak chcesz ustawić swoje przyciski, ja.mi. po lewej, prawej lub na środku strony internetowej.
W tym artykule omówiono użycie CSS do wyrównania przycisku po prawej stronie. Dostępne są różne właściwości CSS do pozycjonowania tekstu lub przycisku. Możemy to zrobić za pomocą właściwości pływakowej, właściwości tekstu i właściwości uzasadnienia.
Właściwość Float, aby wyrównać przycisk w prawo
Właściwość CSS Float określa, w jaki sposób dane są ustrukturyzowane i umieszczane na stronie internetowej.
Najpierw musimy utworzyć przycisk w pliku HTML. Korzystamy z wysublimowanego edytora tekstu, aby wprowadzić tę ilustrację w praktyce. Kod HTML do utworzenia prostego przycisku jest pokazany na poniższym obrazku:
W tym kodzie utworzyliśmy przycisk w pliku HTML. Wykorzystaliśmy znacznik, który jest używany jako pojemnik do owinięcia elementów HTML. Atrybuty „klasy DIV” służą do stylizowania pliku HTML za pomocą CSS. Dodaliśmy tekst wyświetlany na przycisku.
Możesz zobaczyć przycisk, który właśnie utworzyliśmy i wyświetliśmy po lewej stronie strony domyślnie.
Teraz następną rzeczą, którą musimy zrobić, jest ustawienie tego przycisku w prawym rogu strony. Skrypt CSS jest wykorzystywany do osiągnięcia tego. Przycisk jest umieszczony po prawej stronie za pomocą atrybutu Float CSS. „„.button_btn ”odnosi się do klasy div, którą utworzyliśmy w kodzie HTML, aby zrobić przycisk. Teraz możemy uzyskać dostęp i zastosować projekt do przycisku utworzonego wewnątrz tego kontenera. Używamy w nim właściwości „Float” i ustawiamy jej wartość na „Right”. Zapewnia nam pewne wartości - brak, po prawej, lewej, początkowej i dziedziczonej. Ponieważ zamierzamy ustawić przycisk po prawej stronie, stosujemy wartość „prawej” dla właściwości pływakowej w CSS.
Poprzedni skrypt, po wykonaniu, daje dane wyjściowe, które pokazano na następującym obrazie. Przycisk jest umieszczony po prawej stronie ekranu, gdy wartość właściwości pływakowej jest ustawiona na „w prawo”.
Własność Text-Align, aby wyrównać przycisk w prawo
Następną właściwość, której używamy do wyrównania przycisku po prawej. Utworzyliśmy plik HTML. Wewnątrz znacznika HTML stworzyliśmy nagłówek pokazany na górze strony internetowej za pomocą
etykietka. Następnie utworzyliśmy przycisk wewnątrz klasy. Zdefiniuj tekst wyświetlany na przycisku.
To zapewni nam wyjściową stronę internetową przedstawioną na obrazie. Tekst, który dodaliśmy, jest wyświetlany w prawym górnym rogu strony, a tuż pod nim jest przycisk, który utworzyliśmy.
Aby przesunąć ten przycisk, który utworzyliśmy w poprzednim kodzie po prawej stronie strony, skorzystamy z właściwości „Ulicz tekstu”. Używamy „align tekstu” w skrypcie CSS. Kod CSS podano poniżej:
Właściwość tekstu tekstu służy do ustawienia elementu w różnych kierunkach. Ta właściwość zapewnia nam pewne wartości do pozycjonowania elementów, w tym lewy, prawy, środkowy, inicjałowy, dziedziczny i uzasadniony. Ponieważ chcemy, aby przycisk był ustawiony w prawym rogu strony internetowej, używamy wartości „właściwej” dla właściwości „Ulicz tekstu” w CSS.
Teraz pracujemy ze skryptem CSS, aby stylizować przycisk, który utworzyliśmy w pliku HTML. „„.”Odnosi się do klasy DIV, którą stworzyliśmy w HTML, a następnie nazwa klasy. To jest nasz przykład „przycisku”. To pozwala nam stylizować element wewnątrz wspomnianej klasy. Właściwość „Wysokość tekstu” jest ustawiona na wartość „prawej”, aby przycisk wyrównał się do prawego rogu strony internetowej.
Możesz zobaczyć, w jaki sposób proste zastosowanie właściwości „Ulicz tekstu” pomaga w wyrównaniu przycisku do pożądanej pozycji. Dla naszych potrzeb dostosowaliśmy go po prawej stronie, a obraz wyjściowy pokazuje przycisk z tekstem „Naciśnij kursor” wyrównany po prawej stronie.
Właściwość justify-content, aby wyrównać przycisk w prawo
Ostatnią właściwością, którą wykonamy, aby dostosować przycisk do prawego rogu, jest właściwość „Justify-Content”. W poprzednich przypadkach pierwszą rzeczą, którą zrobiliśmy, było utworzenie pliku HTML. Możesz to zrobić w dowolnym edytorze tekstu lub Visual Studio; Wdrażamy go w Sublime Text Editor.
W pliku HTML, wewnątrz znacznika, najpierw utworzyliśmy nagłówek za pomocą
etykietka. Następnie utworzyliśmy manekinowe dane za pomocą
etykietka.
Tag jest używany, gdy piszemy akapity w HTML. Następnie zaczęliśmy . W dokumencie HTML znacznik DIV wyznacza partycję lub segment. Elementy HTML są umieszczane wewnątrz znacznika „div”, a następnie stosuje się styl CSS. Określiliśmy nazwę klasy DIV „Dummy_Btn”. Stylukujemy przycisk w CSS, używając tej nazwy klasy. Następnie, wewnątrz znacznika przycisku, zdefiniowaliśmy „typ przycisku” i „klasa przycisków”, dodatkowo. Dodaliśmy tekst, który pojawi się na przycisku.
Ten obraz pokazuje nagłówek i akapit. Na dole tej zawartości wyświetlany jest przycisk, który utworzyliśmy w HTML.
Teraz stylizujemy ten przycisk ze skryptem CSS przy użyciu właściwości „Justify-Content”. W skrypcie CSS rozpoczęliśmy znacznik „stylu”. Wewnątrz stylu mamy „.manekin-btn ”, aby stylizować przycisk, który stworzyliśmy w klasie DIV o tej nazwie. Wewnątrz aparatów ortodontycznych użyliśmy „Display: Flex”. Aby wykorzystać flexbox, kontener Flex musi mieć atrybut Display Flex. Regulowana długość dla elementów regulowanych jest określona za pośrednictwem właściwości Flex. Następnie ustawiamy właściwość Justify-Content.
Wyjście wcześniej wygenerowanego fragmentu kodu pokazano na poniższym obrazku:
Wniosek
W tym artykule omówiliśmy trzy właściwości CSS, aby wyrównać przycisk do żądanej pozycji. Wykorzystaliśmy właściwość Float, właściwość tekstu i właściwości uzasadnienia. Każda z wymienionych właściwości jest szczegółowo wyjaśniona za pomocą kodów HTML i CSS. Wdrożyliśmy przykładowy kod za pomocą wysublimowanego edytora tekstu. Wykorzystując kilka właściwości, ten samouczek sprawia, że wyrównanie przycisków w CSS jest proste.