大战熟女丰满人妻av-荡女精品导航-岛国aaaa级午夜福利片-岛国av动作片在线观看-岛国av无码免费无禁网站-岛国大片激情做爰视频

專注Java教育14年 全國咨詢/投訴熱線：400-8080-105
動(dòng)力節(jié)點(diǎn)LOGO圖
始于2009，口口相傳的Java黃埔軍校
首頁 hot資訊 CSS對(duì)齊的示例

CSS對(duì)齊的示例

更新時(shí)間：2022-02-17 10:44:15 來源：動(dòng)力節(jié)點(diǎn) 瀏覽1246次

CSS 中的align用于定位項(xiàng)目以及設(shè)置內(nèi)容項(xiàng)目之間和周圍的空間分布。我們可以水平或垂直對(duì)齊項(xiàng)目。各種方法和技術(shù)用于使它們居中，通過注意左右邊距等。下面討論了各種對(duì)齊方法及其用法：

margin:auto：此屬性用于將塊元素對(duì)齊到中心。

注意：除非聲明了 !DOCTYPE，否則在 IE8 中使用margin: auto將不起作用。

示例 1：此示例描述了使用 margin:auto屬性的 CSS 對(duì)齊。

<!DOCTYPE html>
<html>  
<head>
    <style>
    .center {
        margin: auto;
        width: 60%;
        border: 3px solid #73AD21;
        padding: 10px;
    }
    </style>
</head>  
<body>
    <h1 style="color:green;">  
            GeeksforGeeks  
        </h1>
    <h2>Center Align Elements</h2>
    <div class="center"> 
        This is div element on which
        margin auto is used to horizontally
        align it into center 
    </div>
</body> 
</html>

輸出：

位置：絕對(duì);我們可以使用此屬性對(duì)齊項(xiàng)目。

示例 2： 此示例描述 CSS 對(duì)齊使用 position: absolute; 。

<!DOCTYPE html>
<html>
<head>
    <style>
    .right {
        position: absolute;
        right: 0px;
        width: 300px;
        border: 3px solid #73AD21;
        padding: 10px;
    }
    </style>
</head>  
<body>
    <h1 style="color:green;">  
            GeeksforGeeks  
        </h1>
    <h2>Right Align</h2>
    <div class="right">
        <p> 
            Absolute positioned elements 
            can overlap other elements. 
        </p>
    </div>
</body>  
</html>

輸出：

文本對(duì)齊：居中;我們可以將任何用 HTML 編寫的文本居中對(duì)齊。我們可以在各種標(biāo)簽中使用這個(gè)屬性。

示例 3：此示例使用text-align: center;描述 CSS 對(duì)齊 。

<!DOCTYPE html>
<html>  
<head>
    <style>
    .center {
        text-align: center;
        border: 3px solid green;
    }
    </style>
</head>  
<body>
    <h1 style="color:green;
               text-align: center;">  
            GeeksforGeeks  
        </h1>
    <h2>BOTH TEXTS ARE AT CENTER</h2>
    <div class="center">
        <p>This text is centered.</p>
    </div>
</body>  
</html>

輸出：

填充：要垂直對(duì)齊項(xiàng)目，我們可以使用填充。

示例 4：此示例描述了使用 padding 屬性的 CSS 對(duì)齊。

<!DOCTYPE html>
<html>  
<head>
    <style>
    .center {
        padding: 70px 0;
        border: 3px solid green;
    }
    </style>
</head>  
<body>
    <h1 style="color:green;
               text-align:center;">  
            GeeksforGeeks  
        </h1>
    <h2>Center Vertically</h2>
    <div class="center">
        <p>This is vertically centered.</p>
    </div>
</body>  
</html>

輸出：

填充和文本對(duì)齊;使用 padding 和 text-align: center 的組合來垂直和水平對(duì)齊文本。

示例 5：此示例描述了使用 padding 和 text-align 屬性的 CSS 對(duì)齊。

<!DOCTYPE html>
<html>  
<head>
    <style>
    .center {
        padding: 70px 0;
        border: 3px solid green;
        text-align: center;
    }
    </style>
</head> 
<body>
    <h1 style="color:green;">  
          GeeksforGeeks  
        </h1>
    <p>
        Here we use padding and 
        text-align to center the
        div element vertically 
        and horizontally:
    </p>  
    <div class="center">
        <p>
          This text is vertically 
          and horizontally centered.
        </p>
    </div>
</body>  
</html>

輸出：

支持的瀏覽器：

谷歌瀏覽器 95.0

微軟邊緣 95.0

火狐 93.0

歌劇 80.0

Safari 15.0

  • 男 女

提交申請(qǐng)后，顧問老師會(huì)電話與您溝通安排學(xué)習(xí)

免費(fèi)課程推薦 >>
技術(shù)文檔推薦 >>
主站蜘蛛池模板： 国产日本三级 | 久久大香香蕉国产免费网vrr | 免费一级a毛片在线 | 欧美人猛交日本人xxx | 久久婷婷丁香七月色综合 | 亚洲伊人成人网 | 永久黄网站色视频免费 | 国产欧美亚洲精品第3页在线 | 二级片免费看 | 国产精品成人久久久久久久 | 亚洲精品永久一区 | www.色五月| 欧美jlzz18性欧美 | 香蕉网站狼人久久五月亭亭 | 黄色影院网站 | 国产精品午夜高清在线观看 | 国产在线麻豆精品 | julia中文字幕在线观看 | 韩国精品一区二区久久 | 天天插天天插 | 欧美日韩成人高清色视频 | 国产成人综合欧美精品久久 | 日本不卡高清视频 | 欧美性猛交xxxxxxxx软件 | 特级生活片 | 欧美日韩免费做爰视频 | 91中文字幕在线一区 | 狠狠干中文字幕 | 久久伦理片 | 成年毛片 | 欧美一区二区三区不卡片 | 四虎永久在线观看视频精品 | 色丁香在线观看 | 日日拍夜夜嗷嗷叫视频 | 国产精品免费一级在线观看 | 成人看片免费无限观看视频 | 四虎国产视频 | 久久亚洲国产最新网站 | www.欧美.com| 老子影院午夜伦手机不四虎 | 橘子视频在线观看 |