HTML網(wǎng)頁中的圖形是如何對齊的？有什么方法可以使它們對齊？

許多方法可以將HTML元素與CSS對齊，但是一起使用或單獨使用它們并不是那么容易。開發(fā)人員所面臨的困難之一就是試圖將元素集中在頁面中間。

因此，在本文中，我將展示一些最常用的方法，即通過使用不同的CSS屬性在水平和垂直方向上居中圖像。

水平居中

讓我們開始使用3個不同的CSS屬性將圖像水平居中。

文字對齊

使圖像水平居中的第一種方法是使用text-align屬性。但是，僅當(dāng)圖像位于塊級容器（例如<div>）內(nèi)時，此方法才有效：

Margin: Auto

使圖像居中的另一種方法是使用margin：auto屬性（用于左邊距和右邊距）。但是，單獨使用margin：Auto將不適用于圖像。如果需要使用margin：auto，則還必須使用2個其他屬性。

margin-auto屬性對內(nèi)聯(lián)級別的元素沒有任何影響。由于<img>標(biāo)簽是一個內(nèi)聯(lián)元素，因此我們需要先將其轉(zhuǎn)換為塊級元素：

其次，我們還需要定義寬度。因此，左右邊緣可以占用其余的空白空間并自動對齊，可以這樣解決問題（除非我們給出100％的寬度）：

Display: Flex

將圖像水平居中的第三種方法是使用display：flex。同樣，我們對容器使用text-align屬性，它也會使用display：flex。但是，僅使用display：flex是不夠的。容器還必須具有一個稱為justify-content的附加屬性。

justify-content屬性與display：flex一起使用，我們可以使用它水平放置圖像的中心。最后，圖像的寬度必須小于容器的寬度，否則，它會占用100％的空間，然后我們就無法對其進(jìn)行集中化。

垂直居中放置圖像

1、Display: Flex

對于垂直對齊，使用display：flex確實很有幫助。考慮到我們的容器的高度為800px，但圖像的高度僅為500px：

現(xiàn)在，在這種情況下，向容器中添加一行代碼（align-items：center）就可以了：

如果將align-items屬性與display：flex一起使用，就會將元素垂直放置。

2、位置：絕對和變換屬性

垂直對齊的另一種方法是一起使用position和transform屬性。這個有點復(fù)雜，所以讓我們一步一步地做。

步驟1：定義絕對位置

首先，我們將圖像的定位行為從靜態(tài)更改為絕對：

同樣，它應(yīng)該位于相對放置的容器內(nèi)，因此我們添加一個位置：相對于其容器的div。

步驟2：定義頂部和左側(cè)屬性

其次，我們定義圖像的頂部和左側(cè)屬性，并設(shè)置為50％。這會將圖像的起點（左上角）移到容器的中心：

步驟3：定義變換屬性

在第二步的時候已經(jīng)將圖像的一部分移出容器。因此，我們需要將其取回內(nèi)部。在圖像上定義轉(zhuǎn)換屬性，并在其X和Y軸上添加負(fù)50％可以達(dá)到目的：

還可以使用其他方法進(jìn)行水平和垂直居中，我這里只嘗試了最常用的方法。希望這篇文章可以幫助你了解如何在頁面中心對齊圖像。

天，我們將學(xué)習(xí)如何制作一個在懸停時展開和折疊的側(cè)邊欄。它看起來很漂亮，實現(xiàn)比看起來簡單得多。我們將逐步完成本教程，并且在此過程中我還將介紹一些值得注意的HTML / CSS技巧。

以下是本文將涉及的提示和技巧列表：

將欄放在側(cè)邊欄中
在懸停時更改項目的顏色
您需要了解如何修復(fù)的Google材質(zhì)圖標(biāo)存在問題
onmouseover和onmouseout事件
如何將物品保持在一條線上并防止纏繞
如何隱藏側(cè)邊欄中溢出的文本
如何實現(xiàn)平滑過渡

讓我們開始！

第1部分：創(chuàng)建一個簡單的側(cè)邊欄

可以在此筆中找到此步驟的完整代碼：https://codepen.io/dalisc/pen/rEjRWo

只使用HTML，您的網(wǎng)頁將如下圖所示。一些CSS可以做出什么改變！所以我們需要用一些CSS來設(shè)置它，使其看起來像上面的gif。

從第1部分學(xué)習(xí)的CSS技巧和竅門：

將欄放在側(cè)邊欄中

.sidebar {
 height: 100%;
 width: 250px;
 position: fixed;
 top: 0;
 left: 0;
 background-color: #111;
 padding-top: 60px;

此代碼為側(cè)邊欄提供250px（width：250px;）的寬度，背景顏色為深色（background-color：＃111;），并使其在頁面上完全垂直延伸（height：100％;）。在code pen以自定義側(cè)邊欄。

懸停時更改側(cè)邊欄項目的顏色

.sidebar a {
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 25px;
 color: #818181;
 display: block;
}

在這里，我們使用“text-decoration：none;”刪除了文本的下劃線和藍(lán)色，并在側(cè)邊欄項目周圍添加了填充和塊顯示的一些空格。增強用戶體驗的部分是當(dāng)項目顏色從灰色變?yōu)榘咨珪r，這可以通過以下代碼完成：

.sidebar a:hover {
 color: #f1f1f1;
}

此代碼表示當(dāng)您將鼠標(biāo)懸停在類“側(cè)欄”中用<a>標(biāo)記的元素上時，元素的顏色將更改為您設(shè)置的任何顏色，在本例中為＃f1f1f1。

您需要了解如何修復(fù)的Google材質(zhì)圖標(biāo)存在問題

如果您使用Google的素材圖標(biāo)，您會發(fā)現(xiàn)一個令人沮喪的問題：默認(rèn)情況下，圖標(biāo)和相鄰文字沒有正確垂直對齊。

.material-icons,
.icon-text {
 vertical-align: middle;
}
.material-icons {
 padding-bottom: 3px;
 margin-right: 30px;
}

你需要做的是在CSS中垂直對齊它們（vertical-align：middle;）。即使這樣，對齊也有點偏離，所以在此之后給你的圖標(biāo)一個3px垂直增強（padding-bottom：3px;）。

第2部分：檢測您的鼠標(biāo)是否懸停在側(cè)邊欄上

現(xiàn)在我們將添加一些Javascript，因為我們將在側(cè)邊欄中引入一些功能。可以在此筆中找到此步驟的完整代碼

HTML提示：onmouseover和onmouseout

兩個非常有用的事件是onmouseover和onmouseout，它們分別檢測您的鼠標(biāo)是否懸停在特定元素之上或之外。對于我們的側(cè)邊欄，我們希望檢測位于側(cè)邊欄的任何部分，因此我們需要將這些事件添加到側(cè)邊欄的<div>中，如下所示：

<div id=”mySidebar” class=”sidebar” onmouseover=”somethinghappens” onmouseout=”somethinghappens”>

現(xiàn)在，我們可以決定鼠標(biāo)懸停在側(cè)邊欄上或從邊欄懸停的情況。我們需要將“ somethinghappens”替換為我們想要實際發(fā)生的事情，但首先，讓我們通過向控制臺發(fā)送消息來檢查是否發(fā)生了檢測。

現(xiàn)在讓我們編寫兩個Javascript函數(shù)來確認(rèn)檢測到事件：

function testIn() {
 console.log(“hovering in sidebar”);
}
function testOut() {
 console.log(“hovering outside sidebar”);
}

更新我們的側(cè)邊欄：

<div id=”mySidebar” class=”sidebar” onmouseover=”testIn()” onmouseout=”testOut()”>

現(xiàn)在進(jìn)行懸停并檢查控制臺以查找我們編寫的消息。它應(yīng)該可以工作了！我們已經(jīng)設(shè)置了告訴側(cè)邊欄是折疊還是展開所需的檢測。

第3部分：展開/折疊側(cè)邊欄

可以在此筆中找到此最終部分的完整代碼：https：//codepen.io/dalisc/pen/qzRGxQ

我們將折疊邊欄稱為迷你側(cè)邊欄。我們現(xiàn)在想要根據(jù)鼠標(biāo)是否懸停在我的側(cè)邊欄上進(jìn)行兩次查找，因此我們需要在javascript部分中創(chuàng)建一個布爾變量mini。

我們還將創(chuàng)建一個函數(shù)來切換側(cè)邊欄的擴(kuò)展。該功能的邏輯如下：如果側(cè)邊欄處于迷你模式，將鼠標(biāo)懸停在側(cè)邊欄上會將側(cè)邊欄擴(kuò)展為其完整模式（并將變量mini設(shè)置為false）。如果側(cè)邊欄處于完全模式，將鼠標(biāo)懸停在側(cè)邊欄上會將其折疊為迷你模式（并將變量mini設(shè)置為true）。

因此，我們需要更改onmouseover和onmouseout事件，并相應(yīng)地引入新函數(shù)toggleSidebar（）。

更改html：

<div id=”mySidebar” class=”sidebar” onmouseover=”toggleSidebar()” onmouseout=”toggleSidebar()”>

添加到JS（我們現(xiàn)在可以刪除testIn()和testOut()）：

var mini = true;
function toggleSidebar() {
if (mini) {
 console.log(“opening sidebar”);
 document.getElementById(“mySidebar”).style.width = “250px”;
 document.getElementById(“main”).style.marginLeft = “250px”;
 this.mini = false;
} else {
 console.log(“closing sidebar”);
 document.getElementById(“mySidebar”).style.width = “100px”;
 document.getElementById(“main”).style.marginLeft = “100px”;
 this.mini = true;
 }
}

從功能中可以看出，它基本上都是改變側(cè)邊欄黑色塊的寬度。完整模式的寬度為250px，迷你模式的寬度為85px。我們還策略性地定位文本和圖標(biāo)，以便在側(cè)邊欄折疊時完全隱藏文本，僅顯示圖標(biāo)。

默認(rèn)情況下，我們希望側(cè)邊欄處于迷你模式，因此我們也將側(cè)邊欄的寬度（最初未被遮擋時）更改為85px。

.sidebar {
 height: 100%;
 width: 85px;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 transition: 0.5s;
 padding-top: 60px;
}

當(dāng)前默認(rèn)外觀：

此時，文本溢出仍有一些問題，所以我將介紹一些CSS提示和技巧！

從第3部分學(xué)習(xí)的CSS技巧和竅門：

如何在一行中獲取圖標(biāo)和文本

將“white-space：nowrap;”添加到側(cè)欄CSS。

.sidebar {
 height: 100%;
 width: 85px;
 position: fixed;
 top: 0;
 left: 0;
 background-color: #111;
 padding-top: 60px;
 white-space: nowrap;
}

即使文本大于側(cè)邊欄的寬度，這也會阻止文本換行到下一行。但正如你在下面看到的那樣，雖然它現(xiàn)在在一行中，它會溢出，你可以看到溢出...所以我們需要找到隱藏它的方法！

如何隱藏側(cè)邊欄中溢出的文本

要隱藏溢出的文本，只需將“overflow-x：hidden;”和“z-index：1;”添加到側(cè)邊欄css即可。這將隱藏任何寬于側(cè)邊欄寬度的內(nèi)容。

.sidebar {
 height: 100%;
 width: 85px;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 overflow-x: hidden;
 padding-top: 60px;
 white-space: nowrap;
}

現(xiàn)在我們的側(cè)邊欄看起來非常好！（我也改變了主要內(nèi)容，但主要內(nèi)容未在本教程中介紹，它包含在code pen。）

如何為擴(kuò)展創(chuàng)建平滑過渡

現(xiàn)在我們已經(jīng)遇到了我們需要修復(fù)的最后一個小故障，以使側(cè)邊欄順利移動。目前，隨著側(cè)邊欄折疊和展開，沒有動畫添加到它，所以它看起來有點不連貫，像這樣：

所以我們想要的是一個非常平滑的過渡，如第一頁上的gif所示。現(xiàn)在，變化立即發(fā)生。為了順利，我們需要減緩變化。首先，我們需要讓側(cè)邊欄擴(kuò)展得更慢，比方說0.5秒。將其添加到側(cè)邊欄CSS。

.sidebar {
 height: 100%;
 width: 85px;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 overflow-x: hidden;
 transition: 0.5s;
 padding-top: 60px;
 white-space: nowrap;
}

我們還需要將主要部分同時推到左側(cè)。

#main {
 transition: margin-left .5s;
 padding: 16px;
 margin-left: 85px;
}

你有一個漂亮的側(cè)邊欄！

在GitHub存儲庫中找到完整的工作代碼：https：//github.com/dalisc/hover-collapsible-sidebar

轉(zhuǎn)：https://medium.com/@9cv9official/create-a-beautiful-hover-triggered-expandable-sidebar-with-simple-html-css-and-javascript-9f5f80a908d1

午說了CSS字體的顏色屬性，下午來說下字體的文本對齊text-align和文本裝飾text-decoration

text-align屬性用于設(shè)置元素內(nèi)文本內(nèi)容的水平對齊方式。語法規(guī)則如下:

div {

text-align:center;

}

除了有center屬性外，還有另外兩個屬性:

left 左對齊(默認(rèn)值)

right 右對齊

先看下居中效果:

對應(yīng)代碼為:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

text-align: center;

}

</style>

</head>

<body>

<div>人保好，還是平安好呢？一個是央企，一個是巨頭</div>

</body>

</html>

然后是文案左對齊，看下效果:

對應(yīng)代碼為:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

text-align: left;

}

</style>

</head>

<body>

<div>人保好，還是平安好呢？一個是央企，一個是巨頭</div>

</body>

</html>

最后是右對齊，看下效果:

對應(yīng)的代碼為:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

text-align: right;

}

</style>

</head>

<body>

<div>人保好，還是平安好呢？一個是央企，一個是巨頭</div>

</body>

</html>

如果不寫文字對齊的屬性，看下默認(rèn)應(yīng)該都是左對齊，效果如下:

對應(yīng)代碼為:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* div {

text-align: right;

} */

</style>

</head>

<body>

<div>人保好，還是平安好呢？一個是央企，一個是巨頭</div>

</body>

</html>

可以看到已經(jīng)將text-align代碼注釋掉了，默認(rèn)展示就是左對齊

今天先到這里，大家學(xué)習(xí)工作辛苦了~

在線咨詢

上一篇：大屏數(shù)據(jù)展示模板（HTML）
下一篇：從零開始學(xué)習(xí)HTML5開發(fā)必須了解的入門知識！

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML網(wǎng)頁中的圖形是如何對齊的？有什么方法可以使它們對齊？

水平居中

文字對齊

Margin: Auto

Display: Flex

垂直居中放置圖像

第1部分：創(chuàng)建一個簡單的側(cè)邊欄

從第1部分學(xué)習(xí)的CSS技巧和竅門：

第2部分：檢測您的鼠標(biāo)是否懸停在側(cè)邊欄上

第3部分：展開/折疊側(cè)邊欄

從第3部分學(xué)習(xí)的CSS技巧和竅門：

您的項目需求