html設定居中顯示-前端問答-PHP中文網

html設定居中顯示

WBOY

發布： 2023-05-21 17:07:37

原創

27213 人瀏覽過

HTML 是網頁設計中最常用的標記語言之一，而居中顯示也是網頁設計中最基本的顯示方式之一。本篇文章將介紹如何使用 HTML 在網頁中設定居中顯示。

一、水平居中

1.1 使用文字對齊屬性

可以使用 text-align 屬性來對 HTML 元素進行水平居中。此屬性可設定在父元素上，使其中的子元素實作水平居中。

範例程式碼：

<!doctype html>
<html>
  <head>
    <style>
      .container {
        text-align: center;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

登入後複製

1.2 使用 margin 屬性

也可以使用 margin 屬性來實作水平居中。需要注意的是，此方法只適用於具有固定寬度的元素。

範例程式碼：

<!doctype html>
<html>
  <head>
    <style>
      .container {
        width: 500px;
        margin: 0 auto;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

登入後複製

二、垂直居中

2.1 使用文字對齊屬性

如果需要在HTML 元素中實作垂直居中，在父元素上可以設定display: table 屬性，而在子元素上設定display: table-cell 和vertical-align: middle 屬性。

範例程式碼：

<!doctype html>
<html>
  <head>
    <style>
      .container {
        display: table;
        height: 500px;
        width: 100%;
        background-color: gray;
      }
      .inner {
        display: table-cell;
        vertical-align: middle;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <div class="inner">
        <p>这是一段文字</p>
      </div>
    </div>
  </body>
</html>

登入後複製

2.2 使用 flex 屬性

#另外一個實作垂直居中的方法是使用 flex 屬性。父元素上設定 display: flex，而子元素設定 align-items: center 和 justify-content: center 屬性即可實現垂直居中。

範例程式碼：

<!doctype html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 500px;
        width: 100%;
        background-color: gray;
      }
    </style>
  <head>
  <body>
    <div class="container">
      <p>这是一段文字</p>
    </div>
  </body>
</html>

登入後複製

這兩種方法都可以輕鬆實現在 HTML 中進行居中顯示。需要注意的是，在使用 margin 屬性進行水平居中時，必須指定一個固定的寬度，並將 margin 屬性的左右值設為 auto，以實現居中顯示。

總結：

本文介紹了兩種水平居中和兩種垂直居中的方法，其中text-align 和margin 屬性適用於水平居中，而display: table、display: flex 和vertical-align 屬性適用於垂直居中。無論是哪種方法，都能夠輕鬆地實現在 HTML 中進行居中顯示。

以上是html設定居中顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！