資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在一個橫跨整個網頁的區域內垂直對齊圖片？
對齊是確定放置元素（如文字和影像、按鈕和內容框）位置的關鍵。響應式設計的關鍵組成部分是在網站上排列專案。這是因為當從螢幕尺寸較小的裝置（例如智慧手機）開啟網站時，網站的佈局和結構將根據您的預先規劃進行調整。
但是，這種更改也會影響專案之間和專案內部的間距，以及它們的排列和位置。如果您的對齊不正確，您可能會發現按鈕或表單無法點選或填寫，或者螢幕上缺少一半文字。
在本文中，我們將討論如何在 div 元素中垂直對齊影像。當照片垂直對齊時，它們會排列成列。這被稱為影像的垂直對齊。影像可以與任何文字或其他影像本身垂直對齊。這可以透過使用一些 CSS 屬性來實現，例如 CSS 網格、CSS 彈性盒子和 vertical-align 等。
使用 CSS 的 vertical-align 屬性
vertical-align – 使用此CSS 屬性設定元素的垂直對齊。
語法
element{
vertical-align: values;
}
值可以採用以下方式：
長度 - 將元素向上或向下移動指定的長度
% - 將元素向上或向下移動
頂部、中間、底部、基線等。
初始值
繼承
示例
在這裡，我們使用vertical-align屬性將影像與文字垂直對齊。
<!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://tutorialspoint.tw/images/logo.png" alt= "tutorialspoint">
<span>Welcome to Tutorialspoint </span>
</div>
</body>
</html>
使用 CSS Flexbox
垂直對齊一系列元素可以使用 CSS Flexbox 和 CSS Grid 來完成。
CSS Flexbox 是一個包含多個彈性元素的容器。可以根據需要將彈性元素排列成行或列。彈性容器是父元素，而彈性專案是其子元素。
display:flex 允許開發者為每個元件設定樣式，使其看起來合適且美觀。它將元素的子元素排列成行或列。
有多種彈性容器屬性。它們如下所示：
flex-direction – 用於指示容器堆疊彈性元件的方向。值 – column、column-reverse、row、row-reverse
flex-wrap – 用於指定或確定是否需要換行彈性專案。值 – wrap、nowrap
flex-flow – 它允許開發者一起指定 flex-direction 和 flex-wrap。值 – row wrap、column nowrap 等。
align-items – 用於確定彈性專案的對齊方式
值 – center、flex-start、flex-end、space-around 等。
flex-basis – 用於指定彈性專案的尺寸。
值 – 可以是長度 (cm、px、em) 或百分比。
justify-content – 也用於彈性專案的對齊。
值 – center、flex-start、flex-end、space-around 等。
flex-shrink – 接受數字作為值。如果一個專案的值為 3，則其收縮幅度將比值為 1 的專案大三倍。
order – 它指定應對齊彈性元素的順序。
示例
<!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://tutorialspoint.tw/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
<img src= "https://tutorialspoint.tw/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
<img src= "https://tutorialspoint.tw/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
</div>
</body>
</html>
使用 CSS Grid
由於 CSS Grid 功能，無需使用浮動和定位即可更輕鬆地構建網頁，它允許開發者使用行和列建立基於網格的佈局系統。網格容器是父元素。display: grid 用於將元素建立為網格。
一些 CSS 網格屬性如下：
grid-template-columns – 用於建立列。值以長度、% 等表示。
grid-template-rows – 用於建立行。值以長度、% 等表示。
grid-gap – 這是一個簡寫屬性，用於列和行間距。
示例
<!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://tutorialspoint.tw/coffeescript/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
<img src= "https://tutorialspoint.tw/javafx/images/javafx-mini-logo.jpg" alt= "Nature 2">
<img src= "https://tutorialspoint.tw/hadoop/images/hadoop-mini-logo.jpg" alt= "Nature 3">
</div>
</body>
結論
在本文中，我們討論了在橫跨整個網頁的區域內垂直對齊影像的不同方法。
瀏覽量：287
