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.
Vertical-align – Verwenden Sie diese Eigenschaft von CSS, um die vertikale Ausrichtung eines Elements festzulegen.
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
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> 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>
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.
<!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> 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>
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.
<!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> 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>
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
