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

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

WBOY

發布： 2023-08-20 17:37:19

轉載

1212 人瀏覽過

如何在一個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>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>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>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中文網其他相關文章！