如何垂直對齊延伸到整個網頁的部分的圖片？-css教學-PHP中文網

使用CSS的vertical-align屬性

文法

範例

Vertical Alignment

使用 CSS Flexbox

Vertical alignment of images using CSS flexbox

使用 CSS 網格

Vertical alignment of images using CSS Grid

結論

首頁

web前端

css教學

如何垂直對齊延伸到整個網頁的部分的圖片？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 06, 2023 pm 05:09 PM

如何垂直對齊延伸到整個網頁的部分的圖片？

對齊是確定元素（例如文字和圖像、按鈕和內容框）放置位置的關鍵。響應式設計的關鍵組成部分是網站上項目的排列。這是因為從螢幕尺寸較小的裝置（例如智慧型手機）開啟網站時，網站的佈局和結構將根據您預先規劃的進行調整。

但是，此變更將對項目之間和內部的間距以及它們的對齊和定位方式產生影響。您可能會發現無法點擊或填寫按鈕或表單，或者如果對齊不正確，螢幕上會丟失一半文字。

在本文中，我們將討論如何在分割元素中垂直對齊影像。當照片垂直對齊時，它們會組織成列。這稱為影像的垂直對齊。圖像可以與任何文字或其他圖像本身垂直對齊。這可以透過使用一些 CSS 屬性來實現，例如 CSS grid、CSS flexbox、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 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>

登入後複製

使用 CSS Flexbox

可以使用 CSS flexbox 和 CSS Grid 垂直對齊一系列元素。

CSS Flexbox 是一個包含許多 Flex 元素的容器。彈性元素可以根據需要排列成行或列。 Flex 容器是父元素，而 Flex 專案是它們的子元素。

display:flex 允許開發人員設計每個元件的樣式，使其看起來合適且有吸引力。它將元素的子元素排列在行或列中。

Flex 容器有多種屬性。下面提到了它們 -

Flex-direction – 用於指示容器堆疊 Flex 元件的方向。值 – 列、列反轉、行、行反轉
Flex-wrap – 用於指定或確定 Flex 項目是否需要包裝。值 – 換行、現在換行
Flex-flow – 它使開發人員能夠同時指定 flex-direction 和 flexwrap。值 – 行換行、列換行等，
Align-items – 能夠確定彈性項目的對齊方式
#值 – 中心、flex-start、flex-end、space-around 等，
Flex-basis – 用來指定彈性項目的尺寸。
值 - 可以是長度（cm、px、em）或百分比。
Justify-content – 它也用於彈性項目的對齊。
值 – 居中、flex-start、flex-end、space-around 等，
Flex-shrink – 接受數字作為值。如果某項的值為 3，則其收縮量將是值為 1 時的三倍。
順序 - 它指定 Flex 元素的對齊順序。

範例

<!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>

登入後複製

使用 CSS 網格

得益於 CSS 網格功能，無需使用浮動和定位即可更輕鬆地建立網頁，該功能允許開發人員建立基於網格的行和列佈局系統。網格容器是父元素。 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 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>

登入後複製