CSS Absolute Pozycja
Przykład nr 1: Absolutna środkowa pozycja w poziomie
Zrobimy wszystkie te przykłady w kodzie Visual Studio. Musimy utworzyć plik HTML w naszym kodzie Visual Studio i rozpocząć pisanie na nim kodu. Po zakończeniu kodu podanego na obrazie musisz zapisać ten plik za pomocą „.rozszerzenie pliku HTML ”, ponieważ jest to plik„ HTML ”.
Wspomnij typ dokumentu „HTML”, o którym wiemy, że jest to kod HTML. Następnie otwórz „” i „”. Meta jest zdefiniowana poniżej, czyli „Charset = UTF-8”, co umożliwia dostęp do różnych znaków. Połączamy również ten aktualny plik z plik CSS, w którym wykonujemy stylizację i używamy właściwości położenia bezwzględnego. Za opisanie stowarzyszenia „Rel” jest tutaj; Typ to „tekst/css” i „href”, w którym przekazujemy nazwę pliku. Łączymy „Centerstyle.CSS ”z tym bieżącym plikiem. Teraz, po zamknięciu „”, użyjemy „”. Mamy nagłówek w ciele i klasę „div” z nazwą „Element”. W końcu musimy zamknąć wszystkie tagi sekwencji. Najpierw zamknij „Div”, „Body”, a następnie znaczniki „HTML”.
Kod CSS
Oto plik CSS. Podczas tworzenia tego pliku używasz „.rozszerzenie pliku CSS ”, ponieważ jest to nasz plik CSS. Musisz pamiętać, że zapisałeś ten plik o tej samej nazwie, o której wspomniałeś w pliku HTML. Teraz będziemy stylizować tę klasę elementów za pomocą różnych właściwości. Miejsce ".”I napisz„ element ”, ponieważ jest to nazwa klasy„ Div ”. Dostosowujemy odpowiednio „wysokość” i „szerokość” jako „100px” i „200px”. Umieść „pomarańczowy” jako kolor tła. I biały kolor czcionki. Teraz użyjemy właściwości „pozycji bezwzględnej”. Ustaw „pozycję” jako „absolut”. Z „lewej” jest to „0”, a od „prawej” jest ustawiony jako „0”. Tutaj górne i dolne marginesy to „0” i lewy; Prawe marginesy to „auto”. Ten lewy i prawy margines automatyczny jest używany, więc wymaga automatycznego marginesu, aby nadać szerokość obiektu.
Wyjście jest wyświetlane w przeglądarce. Naciśnij „Alt+ B ”w pliku HTML, aby pokazać wyjście. Poniżej wklejamy wyniki powyższego kodu HTML i CSS.
Wyjście
Przykład nr 2: Absolutny środek pozycji pionowo
W tym przykładzie używamy tego samego pliku HTML, który utworzyliśmy w poprzednim przykładzie. Po prostu zmień nagłówek z „Absolutnego środka pozycji w poziomie” na „Absolutny środek pozycji w pionie”.
Tutaj ustawiamy kolor tła na „fioletowy”. Kiedy musimy ustawić absolutną pozycję w pionie, stawiamy pozycję na „absolutne” i tutaj wspominamy „TOP: 0” i „Upadek: 0”. Ustawiamy również margines tego „auto” dla „top” i „dolnego”. Wartość „0” jest ustawiona na „lewy” i „prawy”. Możesz także sprawdzić wyjście tego przykładu, który wkleiliśmy poniżej.
Wyjście
Na tym wyjściu pudełko jest umieszczane w pionie za pomocą właściwości położenia bezwzględnego. Na tym obrazie przestrzeń między tekstem a polem pokazuje, że jest umieszczona w środku w pozycji pionowej.
Przykład nr 3: Absolutna środkowa pozycja zarówno poziomo, jak i pionowo
W naszym trzecim przykładzie ustawimy obiekt w absolutnej pozycji środkowej. Tutaj obiekt jest wyśrodkowany z pionowej, a także z pozycji poziomej. Wypróbujmy ten trzeci przykład.
Tutaj, od samego początku, kod jest taki sam, jak omówiliśmy w naszym poprzednim przykładzie. Właśnie trochę zmieniliśmy kod z znacznika „”. Tworzymy klasę „div”, używając „kontenera” jako nazwy klasy. Przed zamknięciem tego znacznika „Div” tworzymy kolejną „klasę DIV” i tym razem nazwa to „Dane”. Utwórz nagłówek za pomocą „
„Tag, a także napisz akapit wewnątrz tagów„ ”. Następnie użyj znaczników zamykających dla obu znaczników „”.
Kod CSS
W kodzie CSS najpierw otwórz wsporniki do akapitu zapisanego w klasie kontenerów. „Wysokość” tego pojemnika to „60px”, a „szerokość” to także „60px”. Stosujemy tutaj wyściółkę jako „10px”, więc wygeneruje przestrzeń „10px” między treścią a granicą. Tutaj pozycja tekstowa jest „względna”. Chcemy narysować granicę wokół pojemnika lub pudełka, więc używamy do tego właściwości „granicznej”. Ustawiamy szerokość „granicy” jako „3px”, typ graniczny jest „solidny”, a kolor tej granicy jest „zielony”. Tak więc, kiedy wyświetlimy to w przeglądarce, granica będzie miała zielony kolor, stałą, a także szerokość „3px”. Używamy „różu” jako koloru tła. I wybierz „czarny” dla czcionki. Tak więc czcionka lub tekst będzie wyświetlany w kolorze „czarnym”. Teraz tutaj używamy właściwości „Absolute Pozycja.
Wyjście
Przykład nr 4
W tym przykładzie wklejamy kod HTML. Używamy powyższego kodu i tworzymy niewielkie zmiany w nim. Po prostu usuwamy klasę danych akapitowych i DIV w tym przykładzie i tworzymy kolejny plik CSS dla tego przykładu.
Kod CSS
„Wysokość” pojemnika w tym przykładzie to „70px”, a „szerokość” to „300px”. Użyj „pozycji” jako „absolutnej”. Teraz rysujemy granicę, w której ustawiamy jej „szerokość” równą „4px”, granica wyświetli „solid”, ponieważ typ tej granicy jest wybierany jako „solidny”. Kolor jest „czarny”. Następnie ustaw wewnętrzny kolor tła na „biały”. Kolor tekstu, którego tu używamy, jest „czarny”. Teraz umieszczamy nieruchomość absolutnej pozycji. Nasz najwyższy margines to „50%”, a także taka sama dla marginesu „lewej”. Ustawia obiekt „50%” z góry, a także z lewej. Będziemy korzystać z ostatniej właściwości, a jest to właściwość „transformuj”. Przekształca obiekt do tyłu, połowę jego szerokości, a także wysokości. Będzie działać w stosunku do ciała obiektu. Odwróci obiekt „50%” odwrotną połowę jego szerokości i „50%” odwrotną połowę wysokości.
Wyjście
Wniosek
W tym samouczku omówiliśmy koncepcję absolutnego centrum pozycji w CSS. Wyjaśniliśmy, jak wyśrodkować obiekt pionowo i poziomo w osobnych przykładach, a następnie podaliśmy dwa inne przykłady, w których wyśrodkowaliśmy obiekt zarówno pionowo, jak i poziomo w tym samym czasie. W tym samouczku omówiliśmy cztery przykłady. Wykonaliśmy wszystkie przykłady i wkleiliśmy również ekrany wyjściowe. Z łatwością nauczysz się tego absolutnego centrum pozycji w CSS po dokładnym badaniu tego samouczka i mam nadzieję, że będzie to bardzo przydatne, gdy spróbujesz samodzielnie.