單列佈局水平居中佈局方法-java教程-PHP中文網

首頁

Java

java教程

單列佈局水平居中佈局方法

一个新手

Sep 06, 2017 am 10:36 AM

居中佈局水平

水平居中佈局

父元素text-align:center;子元素：inline-block;

# #優點：相容性好；

不足：需要同時設定子元素和父元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中布局</title>
<style>
    *{
      margin: 0;
      padding: 0;
    }
    .parent {
        width: 100%;
        background: green;
        text-align: center;
    }
    .child {
        display: inline-block;
        width: 800px;
        height: 100px;
        background: blue;
    }
</style>
</head>
<body>
<p class="parent">
    <p class="child">1</p>
    <p class="child">2</p>
    <p class="child">3</p>
    <p class="child">4</p>
    <p class="child">5</p>
    <p class="child">6</p>
</p>
</body>
</html>

登入後複製

以上是單列佈局水平居中佈局方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7711

Java教學

1640

CakePHP 教程

1394

Laravel 教程

1288

PHP教程

1232

Related knowledge

Windows 11: 匯入和匯出開始佈局的簡單方法 Aug 22, 2023 am 10:13 AM

在Windows11中，「開始」功能表經過重新設計，並具有一組簡化的應用，這些應用程式排列在頁面網格中，這與它的前身不同，後者在「開始」功能表上有資料夾、應用程式和組。您可以自訂「開始」功能表佈局，並將其匯入並匯出至其他Windows設備，以根據您的喜好進行個人化設定。在本指南中，我們將討論在Windows11上匯入開始佈局以自訂預設佈局的逐步說明。什麼是Windows11中的Import-StartLayout？導入開始佈局是Windows10和更早版本中使用的cmdlet，用於將「開始」功能表的自定

如何在 Windows 11 中儲存桌面圖示位置佈局 Aug 23, 2023 pm 09:53 PM

Windows11在使用者體驗方面帶來了很多東西，但迭代並不完全防錯。使用者不時會遇到問題，圖示定位的變更很常見。那麼如何在Windows11中保存桌面佈局呢？該任務有內建和第三方解決方案，無論是保存當前視窗的螢幕解析度還是桌面圖示的排列。對於桌面上有一堆圖示的使用者來說，這一點變得更加重要。繼續閱讀以了解如何在Windows11中儲存桌面圖示位置。為什麼Windows11不儲存圖示佈局位置？以下是Windows11不保存桌面圖示佈局的主要原因：對顯示設定的變更：通常，當您修改顯示設定時，配置的自訂

WordPress網頁錯位現象解決攻略 Mar 05, 2024 pm 01:12 PM

WordPress網頁錯位現象解決攻略在WordPress網站開發中，有時候我們會遇到網頁元素錯位的情況，這可能是由於不同裝置上的螢幕尺寸、瀏覽器相容性或CSS樣式設定不當所致。要解決這種錯位現象，我們需要仔細分析問題、找出可能的原因，並逐步進行除錯和修復。本文將分享一些常見的WordPress網頁錯位問題以及對應的解決攻略，同時提供具體的程式碼範例，幫助開

3060顯示卡的性能如何？ Jan 27, 2024 am 10:36 AM

有很多遊戲玩家對顯示卡3060表示非常好奇，想入手一張3060的顯示，但是不知道RTX3060是在一個什麼水平，其實這款顯示卡也是在一個比較主流的水平。 3060顯示卡什麼水準：答：主流水準。這款RTX3060顯示卡非常受廣大玩家的歡迎，而且也在熱賣中，其擁有RTX30的系列特有的優點，性價比非常高，對遊戲畫面要求較高的玩家可以選擇這張顯示卡。 3060顯示卡拓展介紹：幀率：被廣大玩家喜愛，擁有12GB的大顯存，非常受歡迎。在12GB的大顯存下，能夠流暢運行起3A大作無任何卡頓，幀數甚至可達到60。性價比：它

如何使用HTML和CSS建立響應式輪播圖佈局 Oct 20, 2023 pm 04:24 PM

如何使用HTML和CSS建立一個響應式輪播圖佈局在現代的網頁設計中，輪播圖是一個常見的元素。它能夠吸引用戶的注意力，展示多個內容或圖片，並且能夠自動切換。在本文中，我們將介紹如何使用HTML和CSS建立一個響應式的輪播圖佈局。首先，我們需要建立一個基本的HTML結構，並且加入所需的CSS樣式。以下是一個簡單的HTML結構：<!DOCTYPEhtml&g

WPS表格居中怎麼設定 Mar 19, 2024 pm 09:34 PM

隨著WPS的功能越來越強大，我們遇到的關於功能使用的問題也越來越多。在WPS中，我們常常會使用到WPS表格，如果我們需要列印WPS表格，為了讓表格看起來美觀，這時候我們需要讓表格居中。那麼，問題來了，我們該如何讓WPS表格居中呢？今天我在這裡分享一下教程，希望能夠幫助你們！步驟詳情：1、我以實戰操作來講解，以下是我用WPS表格製作了一個簡單的表格。 2.透過列印預覽，我們可以發現，WPS表格預設是居左的。如果我們要是想把表格居中的話該怎麼辦呢？ 3.這時候，我們需要點選【工具列】中的【頁面佈局】的

介紹win7裡的視窗排列方式 Dec 26, 2023 pm 04:37 PM

當我們同時開啟多個視窗時，win7具有將多個視窗以不同方式排列然後同時顯示的功能，能夠讓我們更清晰地查看到每個視窗的內容。那麼win7窗口排列方式有幾種呢，他們分別都是什麼樣的呢，下面就跟著小編一起來看一下吧。 win7視窗排列方式有幾種答案：三種，分別是層疊視窗、堆疊顯示視窗和並排顯示視窗。當我們開啟多個視窗時，可以右鍵點擊任務欄空白處。就可以看到三種視窗排列方式了。一、層疊視窗：二、堆疊顯示視窗：三、並排顯示視窗：

H5中position屬性的靈活運用技巧 Dec 27, 2023 pm 01:05 PM

H5中如何靈活運用position屬性在H5開發中，常會涉及到元素的定位和佈局問題。這時候，CSS的position屬性就會發揮作用。 position屬性可以控制元素在頁面中的定位方式，包括相對定位（relative）、絕對定位（absolute）、固定定位（fixed）和黏附定位（sticky）。本文將詳細介紹在H5開發中如何靈活運用position屬性

See all articles

單列佈局水平居中佈局方法

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題