Strona responsywna potrafi dostosować się do rozmiaru ekranu i wymiarów urządzenia, na którym jest przeglądana. Oprócz responsywności strony internetowej konieczne jest również, aby obrazy i tekst były wyrównane i responsywne. Wyrównane obrazy to te, które otaczają je tekstem. Tekst wyrównany to taki, który wygląda jak cały akapit.
W tym artykule omówiona zostanie metoda responsywnego wyrównywania obrazów i tekstu.
Jak w sposób responsywny wyrównywać obrazy i tekst?
Treść, w tym obrazy i tekst, można dostosować w sposób responsywny za pomocą Bootstrap. Aby zapewnić demonstrację, wymieniliśmy dwa przykłady:
Przykład 1: Wyśrodkuj tekst w pionie, a obraz w poziomie
Najpierw spróbuj wyśrodkować obraz w poziomie, a tekst w pionie. W tym celu postępuj zgodnie z instrukcjami podanymi poniżej:
Krok 1: Utwórz strukturę HTML
Tworząc strukturę HTML, najpierw połącz element „ Bootstrap ”, a także zewnętrzny plik CSS. Następnie utwórz Krok 2: Zastosuj CSS Na kontenerze: NA Na tekście: Można zauważyć, że tekst jest wyśrodkowany w pionie, a obraz jest wyśrodkowany w poziomie: Przykład 2: Wyrównaj do lewej tekst i responsywny obraz W tym przykładzie obraz i tekst zostaną wyrównane do lewej. W tym celu wykonaj poniższe instrukcje krok po kroku: Krok 1: Utwórz strukturę HTML Kod HTML jest taki sam jak powyżej, użyty w przykładzie. Krok 2: Zastosuj CSS Na kontenerze: NA Na tekście: Dane wyjściowe potwierdzają, że tekst i obraz są wyrównane do lewej: Aby responsywnie wyrównywać obrazy i tekst, najpierw utwórz siatkę lub układ elastyczny w CSS, a następnie ustaw opcję „ element wyrównania ” wartość właściwości do „ Centrum ”. Spowoduje to odpowiednie wyrównanie obrazów i tekstu w CSS. W tym artykule udostępniono użytkownikom kompletny przewodnik dotyczący responsywnego wyrównywania obrazów i tekstu. tag i tekst:
< ciało >
< div klasa = 'pojemnik' >
< img src = „obraz-testowy.jpg” wszystko = „Obraz testowy” >
< klasa div = 'tekst' > To jest jakiś tekst. div >
div >
ciało >
:
.pojemnik {
wyświetlacz: przewód ;
wyrównanie tekstu: do środka;
justify-content: środek;
wyrównanie elementów: środek;
}
obraz {
maksymalna szerokość: 100 % ;
wysokość: automatyczna;
}
.tekst {
rozmiar czcionki: 16 pikseli;
maksymalna szerokość: 390px;
}
:
.pojemnik {
wyświetlacz: przewód ;
kierunek flex: kolumna;
wyrównanie elementów: elastyczny start;
wyrównanie tekstu: do lewej;
}
obraz {
maksymalna szerokość: 100 % ;
wysokość: automatyczna;
}
.tekst {
rozmiar czcionki: 16 pikseli;
maksymalna szerokość: 390px;
}
Wniosek