Umieszczenie treści pojawiających się na stronie internetowej jest bardzo znaczące, jeśli chodzi o uczynienie Twojej witryny znakomitych i zwiększających jej wrażenia użytkownika. Treść może być elementem HTML (poziom inline lub blokowy), trochę tekstu, obraz itp. W CSS dostępne są różne podejścia do wyrównania tego typu treści na Twojej stronie internetowej. W tym poście omówimy niektóre z tych podejść, aby pojęcie treści są dla Ciebie jasne.

Zaczynajmy

Wyrównaj elementy na poziomie bloków

Istnieje ogromna liczba elementów, które należą do kategorii elementów na poziomie bloku, takich jak

,

Do

, , itp. Możesz wyrównać te elementy na różne sposoby. Omówiliśmy tutaj trochę dla Ciebie.

Jak wyrównać tekst wyrównania w CSS

Możesz wyrównać tekst za pomocą CSS tekst-align nieruchomość. Ta właściwość renderuje różne wartości, takie jak lewy, prawy, środek i uzasadnia.

Przykład

Załóżmy, że chcesz wyrównać tekst obecny w pojemniku Div po prawej stronie. Postępuj zgodnie z poniższym kodem.

Html

Ten tekst jest zgodny.

Umieściliśmy

element wewnątrz elementu i przypisał klasę „prawą” do elementu.

CSS

.Prawidłowy
Text-Align: Right;
granica: 3px solidny fiolet;

Korzystając z właściwości tekstu tekstu, wyrównujemy tekst po prawej stronie kontenera Div.

Wyjście

Tekst został wyrównany w prawo za pomocą właściwości tekstu tekstowego.

Wyrównaj elementy wbudowane

Nadchodzi taki czas, kiedy musimy wyrównać elementy wbudowane, takie jak obrazy. Możesz wyrównać tego rodzaju elementy, zmieniając ich typ elementu na poziom blokowania za pomocą właściwości wyświetlania CSS, a następnie wyrównać różne właściwości CSS zgodnie z potrzebą.

Wyrównać obraz

Przy użyciu różnych właściwości CSS, takich jak wyświetlacz, margines lewic, Lub margines-prawy, Możesz wyrównać obraz w dowolnym stylu.

Przykład

Załóżmy, że chcesz wyśrodkować wyrównanie obrazu poziomo oprócz tego, czy jest w pojemniku, czy nie.

Html

Tutaj wstawiliśmy obraz za pomocą znacznika.

CSS

img
Blok wyświetlacza;
margines-lew: auto;
margines-prawy: auto;
Szerokość: 50%;

Aby wyśrodkować obraz obrazu poziomo, ustaw jego wyświetlacz na blokowanie, a oba marginesy (lewe i prawe) na automatyczne. Ponadto możesz zapewnić wybraną szerokość lub wysokość.

Wyjście

Obraz został pomyślnie wyrównany na środku.

Wyrównanie poziome

Zbadajmy różne podejścia, które można wykorzystać do wyrównania elementów na poziomie blokowym poziomym.

Jak wyrównać element

Załóżmy, że masz a i chcesz, aby zajęła tylko określoną ilość miejsca zamiast zająć całą przestrzeń poziomą i wyrównać ją na środku strony. Oto jak to robisz.

Html

Wyrównanie treści w CSS

Tutaj stworzyliśmy element i zagnieżdżyliśmy

element w nim.

CSS

.Centrum
Wyściółka: 5px;
Margines: Auto;
Szerokość: 70%;
granica: 3px solidny fiolet;

Teraz element div zajął określoną przestrzeń, aby nie rozciągał się na zakątki jego pojemnika. Aby wyrównać go w poziomie, ustaw margines na automatyczne.

Wyjście

DIV został pomyślnie udzielony na środku.

Jak wyrównać elementy za pomocą właściwości pozycji

W tym przykładzie wyrównujemy kontener DIV do prawej strony za pomocą wartości bezwzględnej właściwości pozycji.

Html

Wyrównanie elementów za pomocą właściwości pozycji CSS

Ta Div jest wyrównana do prawej strony za pomocą wartości wejściowej właściwości pozycji CSS.

Tutaj utworzyliśmy dwa kontenery Div, aby zrozumieć działanie wartości bezwzględnej właściwości pozycji. Klasa „div” jest przypisana do pierwszego tagu div, a klasa „zielona” jest przypisana do drugiego znacznika div.

CSS

.div
Wyściółka: 15px;
Border: 3px Solid Black;

.zielony
Pozycja: absolutna;
Racja: 1%;
TOP: 15%;
szerokość: 300px;
granica: 3px solidny zielony;
Wyściółka: 10px;

Oba kontenery Div otrzymały pewien styl, jednak właściwość położenia drugiego div została ustawiona na absolutną. Teraz drugi div zostanie wyrównany w odniesieniu do pozycji Pierwszy div.

Wyjście

„Zielona” Div została absolutnie ustawiona w odniesieniu do pierwszej div przy użyciu właściwości pozycji CSS.

Jak wyrównać elementy za pomocą właściwości Float.

Załóżmy, że chcesz unosić kontener DIV po prawej stronie strony.

Html

Witaj świecie!

W powyższym kodzie utworzyliśmy kontener Div i zagnieżdżono

element w nim.

CSS

.Prawidłowy
Float: Racja;
szerokość: 300px;
granica: 3px solidny fiolet;
Wyściółka: 5px;

Korzystając z właściwości pływakowej, unosimy całą div i zawartość wewnątrz niej po prawej stronie.

Wyjście

Pojemnik Div ​​został odpowiednio uniesiony do.

Wyrównanie pionowe

Tutaj wyjaśniliśmy kilka sposobów użycia do wyrównania elementów w pionie.

Jak wyrównać elementy pionowo za pomocą wyściółki

Załóżmy, że chcesz wyśrodkuj pionowo jakiś tekst obecny w pojemniku Div.

Html

Ten akapit jest skoncentrowany pionowo.

Tutaj stworzyliśmy element div i zagnieżdżyliśmy

element w nim.

CSS

.Centrum
Wyściółka: 80px 0;
granica: 3px solidny fiolet;

W powyższym kodzie CSS podajemy wyściółkę 80px od górnej i dolnej oraz 0px od lewej i prawej 0px do

tag do wyśrodkowania wyrównania go wewnątrz div.

Wyjście

Tekst został pomyślnie wyrównany na środku.

Jak wyrównać elementy za pomocą wysokości linii

Korzystając z tego samego przykładu co powyżej, możemy wyrównać tekst wyrównania za pomocą właściwości wysokości linii CSS.

CSS

.Centrum
Wysokość linii: 200px;
granica: 3px solidny fiolet;
Text-Align: Center;

.Center P
Wysokość linii: 1.5;
Wyświetlacz: Block Inline;

Wystarczy ustaw linię kontenera Div na 200px, a następnie ustawić wysokość linii

element do 1.5.

Wyjście

Elementy HTML zostały wyrównane zarówno pionowo, jak i poziomo za pomocą wysokości linii.

Jak wyrównać elementy pionowo za pomocą Flexbox

Znowu rozważamy ten sam przykład i tym razem używamy ELEMENTY ELEMENTY PROJE.

CSS

.Centrum
Wyświetlacz: Flex;
Justify-Content: Center;
Wyrównanie: Center;
Wysokość: 200px;
granica: 3px solidny zielony;

Tutaj ustawiamy wyświetlanie kontenera Div jako elastyczne i środkowe wyrównanie treści i elementów obecnych w kontenerze Div za pomocą właściwości Justify-Content i Align-Items dostarczone przez CSS Flex-box. Ponadto zapewniamy również pewną wysokość i granicę.

Wyjście

Tekst jest z powodzeniem wyrównany środkiem (zarówno w pionie, jak i poziomo) za pomocą FlexBox.

Wniosek

W CSS dostępne są różne podejścia w celu wyrównania elementów HTML, takich jak można pionowo, a także poziomo wyrównać je do prawej, lewej lub wyśrodkuj przy użyciu właściwości pozycji, właściwości pływakowej, wyściółki, wysokości linii lub flexboxu itp. Ponadto możesz użyć tych właściwości do wyrównania tekstu i obrazów pojawiających się na Twojej stronie. Omówiliśmy szczegółowo kilka różnych podejść z odpowiednimi przykładami, które są przydatne w przypadku wyrównania treści na twoich stronach internetowych.