Web-Frontend
CSS-Tutorial
Wie richtet man ein Bild in einem Abschnitt, der sich über die gesamte Webseite erstreckt, vertikal aus?
Wie richtet man ein Bild in einem Abschnitt, der sich über die gesamte Webseite erstreckt, vertikal aus?
Die Ausrichtung ist der Schlüssel zur Bestimmung, wo Elemente wie Text und Bilder, Schaltflächen und Inhaltsfelder platziert werden sollen. Ein wesentlicher Bestandteil des responsiven Designs ist die Anordnung der Elemente auf Ihrer Website. Denn wenn eine Website von einem Gerät mit kleinerer Bildschirmgröße, etwa einem Smartphone, geöffnet wird, passt sich das Layout und die Struktur der Website an Ihre Planung an.
Diese Änderung wirkt sich jedoch auf den Abstand zwischen und innerhalb von Elementen sowie auf deren Ausrichtung und Positionierung aus. Möglicherweise stellen Sie fest, dass Sie auf eine Schaltfläche oder ein Formular nicht klicken oder diese nicht ausfüllen können oder dass die Hälfte des Textes auf dem Bildschirm fehlt, wenn er nicht richtig ausgerichtet ist.
In diesem Artikel besprechen wir, wie man Bilder in geteilten Elementen vertikal ausrichtet. Wenn Fotos vertikal ausgerichtet sind, werden sie in Spalten organisiert. Dies wird als vertikale Ausrichtung des Bildes bezeichnet. Das Bild kann vertikal an beliebigen Texten oder anderen Bildern ausgerichtet werden. Dies kann durch die Verwendung einiger CSS-Eigenschaften wie CSS-Raster, CSS-Flexbox, vertikale Ausrichtung usw. erreicht werden.
Verwenden Sie die CSS-Eigenschaft „Vertikale Ausrichtung“
Vertical-align – Verwenden Sie diese Eigenschaft von CSS, um die vertikale Ausrichtung eines Elements festzulegen.
Grammatik
element{
vertical-align: values;
}
-Wert kann auf folgende Weise vorliegen:
Länge – Hebt das Element um die angegebene Länge nach oben oder unten
%- Elemente anheben oder absenken
Oben, Mitte, unten, Grundlinie usw.,
Anfänglich
Inhärent
Beispiel
Hier verwenden wir das Attribut vertical-align, um das Bild vertikal am Text auszurichten.
<!DOCTYPE html>
<html>
<head>
<title> Vertical Alignment </title>
<style>
body {
background: rgb(200, 221, 220);
}
h1{
text-align: center;
color: #00FF00;
text-decoration: underline;
}
.main {
border: 1px solid black;
height: 70%;
width: 90%;
padding: 15px;
margin-top: 10px;
margin-right: -5px;
border-radius: 5px;
}
.main img {
width: 40%;
height: 8%;
padding: 2px;
border-radius: 7px;
}
span {
padding: 55px;
font-size: 25px;
color: #097969;
vertical-align: 100%;
font-family: Brush Script MT;
font-weight: 900;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h1 id="Vertical-Alignment"> Vertical Alignment </h1>
<div class= "main">
<img src= "https://www.tutorialspoint.com/images/logo.png" alt= "tutorialspoint">
<span>Welcome to Tutorialspoint </span>
</div>
</body>
</html>
Verwendung von CSS Flexbox
Sie können CSS Flexbox und CSS Grid verwenden, um eine Reihe von Elementen vertikal auszurichten.
CSS Flexbox ist ein Container, der viele Flex-Elemente enthält. Flexible Elemente können je nach Wunsch in Reihen oder Spalten angeordnet werden. Flex-Container sind übergeordnete Elemente und Flex-Elemente sind ihre untergeordneten Elemente.
display:flex ermöglicht es Entwicklern, jede Komponente so zu gestalten, dass sie angemessen und attraktiv aussieht. Es ordnet die untergeordneten Elemente eines Elements in Zeilen oder Spalten an.
Flex-Container haben mehrere Eigenschaften. Sie werden unten erwähnt -
Flex-Richtung – Wird verwendet, um die Richtung anzugeben, in der der Container Flex-Komponenten stapelt. Werte – Spalte, Spaltenumkehr, Zeile, Zeilenumkehr
Flex-wrap – Wird verwendet, um anzugeben oder zu bestimmen, ob ein Flex-Projekt einen Wrapping erfordert. Wert – Newline, Newline jetzt
Flex-Flow – Es ermöglicht Entwicklern, sowohl Flex-Richtung als auch Flexwrap anzugeben. Wert – Zeilenumbruch, Spaltenumbruch usw.,
Align-items – Möglichkeit, die Ausrichtung von Flex-Items zu bestimmen
Werte – Mitte, Flex-Start, Flex-Ende, Raum-um, usw.,
Flex-Basis – Wird verwendet, um die Abmessungen von Flex-Artikeln anzugeben.
Wert – kann Länge (cm, px, em) oder Prozentsatz sein.
Justify-content – Wird auch zur Ausrichtung von Flex-Elementen verwendet.
Werte – Mitte, Flex-Start, Flex-Ende, Raum-um usw.,
Flex-shrink – Akzeptiert eine Zahl als Wert. Wenn ein Gegenstand einen Wert von 3 hat, schrumpft er dreimal so stark, als wenn er einen Wert von 1 hätte.
Order – Gibt die Ausrichtungsreihenfolge von Flex-Elementen an.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title> Vertical alignment of series of images </title>
<style>
body {
background: rgb(200, 221, 220);
}
h1{
text-align: left;
margin: 15px;
color: green;
text-decoration: underline;
}
h2{
margin: 15px;
}
.main {
border: 1px solid black;
height: 55%;
width: 20%;
padding: 25px;
margin: 10px;
border-radius: 5px;
}
.main img {
width: 100px;
height: 110px;
padding: 3px;
border-radius: 7px;
}
.main{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h2 id="Vertical-alignment-of-images-using-CSS-flexbox"> Vertical alignment of images using CSS flexbox </h2>
<div class= "main">
<img src= "https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
<img src= "https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
<img src= "https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
</div>
</body>
</html>
Verwenden Sie CSS Grid
Dank der CSS-Grid-Funktion, die es Entwicklern ermöglicht, ein rasterbasiertes Zeilen- und Spaltenlayoutsystem zu erstellen, ist es einfacher, Webseiten ohne Floats und Positionierung zu erstellen. Der Rastercontainer ist das übergeordnete Element. Anzeige: Raster wird verwendet, um Elemente als Raster zu erstellen.
Einige CSS-Rastereigenschaften sind wie folgt -
Grid-template-columns – wird zum Erstellen von Spalten verwendet. Diese Werte werden als Länge, %, usw. ausgedrückt,
Grid-template-rows – wird zum Erstellen von Zeilen verwendet. Der Wert wird in Form von Länge, %, usw. ausgedrückt,
Grid-gap – Es handelt sich um eine Abkürzungseigenschaft für Spaltenlücken und Zeilenlücken.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title> Vertical alignment of images using CSS Grid </title>
<style>
body {
background: rgb(200, 221, 220);
}
h1{
text-align: left;
margin: 15px;
color: green;
text-decoration: underline;
}
h2{
margin: 15px;
}
.main {
border: 1px solid black;
height: 55%;
width: 30%;
padding: 15px;
margin: 10px;
border-radius: 5px;
display: grid;
grid-template-rows: 35% 35%;
}
.main img {
width: 150px;
height: 110px;
padding: 2px;
border-radius: 7px;
}
</style>
</head>
<body>
<h2 id="Vertical-alignment-of-images-using-CSS-Grid"> Vertical alignment of images using CSS Grid </h2>
<div class= "main">
<img src= "https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
<img src= "https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
<img src= "https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
</div>
</body>
Fazit
In diesem Artikel haben wir verschiedene Möglichkeiten besprochen, Bilder in Abschnitten, die sich über die gesamte Webseite erstrecken, vertikal auszurichten.
Das obige ist der detaillierte Inhalt vonWie richtet man ein Bild in einem Abschnitt, der sich über die gesamte Webseite erstreckt, vertikal aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Machen Sie Ihren ersten Seltsamen -Sufle -Übergang
Mar 15, 2025 am 11:08 AM
Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.
Show, Don ' Tell
Mar 16, 2025 am 11:49 AM
Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Was zum Teufel haben NPM -Befehle?
Mar 15, 2025 am 11:36 AM
NPM-Befehle führen verschiedene Aufgaben für Sie aus, entweder als einmalige oder als kontinuierlich ausgeführter Vorgang für Dinge wie das Starten eines Servers oder das Kompilieren von Code.
Wie verwenden Sie CSS, um Texteffekte wie Textschatten und Gradienten zu erstellen?
Mar 14, 2025 am 11:10 AM
In dem Artikel werden CSS für Texteffekte wie Schatten und Gradienten verwendet, diese für die Leistung optimiert und die Benutzererfahrung verbessert. Es listet auch Ressourcen für Anfänger auf (159 Zeichen)
Verwenden wir (x, x, x, x), um über Spezifität zu sprechen
Mar 24, 2025 am 10:37 AM
Ich habe mich neulich mit Eric Meyer unterhalten und erinnerte mich an eine Eric Meyer -Geschichte aus meinen prägenden Jahren. Ich habe einen Blog -Beitrag über CSS -Spezifität geschrieben, und
Erstellen Sie Ihr eigenes Bragdoc mit ELEITY
Mar 18, 2025 am 11:23 AM
Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.
