如何在一個div中垂直對齊元素？-html教學-PHP中文網

首頁

web前端

html教學

如何在一個div中垂直對齊元素？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 20, 2023 pm 05:37 PM

元素div垂直對齊

如何在一個div中垂直對齊元素？

我們可以使用以下任何一種方式輕鬆地在一個div中垂直對齊元素 −

position屬性
行高屬性
填滿屬性

讓我們逐一看例子 -

使用position屬性在div中垂直對齊元素

The position property is used in positioning an element. It can be used in conjunction with the top, right, bottom and left properties to position an element where you want it. Here are the possible values of − position

#static − 元素方塊作為正常文件流程的一部分進行佈局，跟隨前面的元素和後面的元素。
relative − The element's box is laid out as a part of the normal flow, and then offset by some distance.
absolute − 元素的方塊相對於其包含區塊進行佈局，並且完全從文件的正常流程中移除。
fixed − 元素框是絕對定位的，具有position: absolute的行為描述。主要區別在於固定定位元素的包含區塊始終是視口。

現在讓我們來看一個使用position屬性在div中垂直對齊元素的範例−

#Example

的中文翻譯為：

範例

<!DOCTYPE html>
<html>
<head>
   <title>Align Elements</title>
   <style>
      #demo1 {
         position: relative;
      }
      #demo2 {
         position: absolute;
         top: 50%;
         height: 100px;
         margin-top: -50px;
      }
      #demo1 {
         background-color: yellow;
         border: 2px solid gray;
         height: 15em;
      }
      #demo2 {
         background-color: skyblue;
         border: 1px solid orange;
         width: 100%;
      }
   </style>
</head>
<body>
   <h1 id="Vertically-Align-Elements">Vertically Align Elements</h1>
   <p>Use the position property:</p>
   <div id="demo1">
      <div id="demo2">
         <p>This is a demo text</p>
         <p>This is another demo text</p>
      </div>
   </div>
</body>
</html>

使用line-height屬性在div中垂直對齊元素

line-height屬性修改了組成一行文字的內聯框的高度。以下是line-height的可能值 -

normal − 指示瀏覽器將元素中的行高設定為「合理」的距離。
number − The actual height of lines in the element is this value multiplied by the font-size of the element.
length − 元素中行的高度是給定的值。
百分比 − 元素中行的高度是根據元素的字體大小的百分比計算的。

讓我們現在看一個使用line-height屬性在div中垂直對齊元素的範例 -

Example

的中文翻譯為：

範例

<!DOCTYPE html>
<html>
<head>
   <title>Align Elements</title>
   <style>
      p {
         margin: 0;
      }
      #demo {
         border: 3px solid yellow;
         background-color: orange;
         height: 100px;
         line-height: 100px;
      }
   </style>
</head>
<body>
   <h1 id="Vertically-Aligned-Element">Vertically Aligned Element</h1>
   <p>Use the line-height property:</p>
   <div id="demo">
      <p>This is demo text</p>
   </div>
</body>
</html>

使用padding屬性在div中垂直對齊元素

padding屬性可讓您指定元素的內容與其邊框之間應該出現多少空間。此屬性的值應為長度、百分比或單字inherit。如果值為inherit，則其填滿將與其父元素相同。如果使用百分比，則百分比是相對於包含框的。

以下CSS屬性可用來控制清單。您也可以使用下列屬性為框的每個邊設定不同的填滿值 -

padding-bottom specifies the bottom padding of an element.
padding-top specifies the top padding of an element.
padding-left specifies the left padding of an element.
padding-right specifies the right padding of an element.
padding serves as shorthand for the preceding properties.

Let us now see an example to Vertically align elements in a div using the padding property −

Example

的中文翻譯為：

範例

<!DOCTYPE html>
<html>
<head>
   <title>Align Element</title>
   <style>
      .demo {
         padding: 60px 0;
         border: 2px solid #5c34eb;
         background-color: orange;
      }
   </style>
</head>
<body>
   <h1 id="Vertically-Align-Element">Vertically Align Element</h1>
   <p>Use the padding property:</p>
   <div class="demo">
      <p>This is demo text.</p>
      <p>This is another text.</p>
   </div>
</body>
</html>

以上是如何在一個div中垂直對齊元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

See all articles