<progress id="2772j"><code id="2772j"><tt id="2772j"></tt></code></progress>

<optgroup id="2772j"><em id="2772j"><del id="2772j"></del></em></optgroup>

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

【熱點話題】 零基礎學IT IT學習教程 IT學習筆記 IT技術干貨 IT培訓機構 IT應聘面試 IT職場就業
當前位置:首頁  >  關于學院  >  技術干貨  > Div組件中的中心元素

Div組件中的中心元素

來源:千鋒教育
發布人:syq
時間: 2022-09-14 11:03:11 1663124591

  在 div 容器中將元素居中有時會變得棘手。知道到底什么會起作用,而不是每次制作網頁的前端時都進行試驗,這一點非常重要。

  如何使用CSS居中潛水?

  現在,使元素居中不僅意味著 div 組件居中。通過居中,我將專注于:

  水平居中

  垂直居中

  水平和垂直居中(組件居中)

1

  默認情況下,網頁內容從屏幕的左上角開始,從左向右移動。

  讓我們首先將圖像水平居中在 div 組件中。之后,我們將垂直居中圖像,然后將圖像完全居中。

  將圖像水平居中

2

  使用文本對齊水平居中 Div 中的圖像

  假設您有一個 div,您可以在其中按以下方式插入圖片:

3

  現在,我將應用CSS樣式,以便圖像變得可見。您可以看到,現在圖像處于其默認位置。

4

  我們通常使用文本對齊方法來使文本居中。但是,我們也可以在容器內的圖像上使用它。

5

  僅當我們在容器中使用此值而不是圖像時,此方法才有效。

  使用自動邊距將 div 中的圖像水平居中

  可用于在 div 容器中將圖像水平居中的另一種方法是具有值 auto 的 margin 屬性。

  在此方法中,元素將占用指定的寬度,并且空白區域將在左邊距和右邊距之間平均拆分。我們將在映像上應用此屬性,而不是在容器上應用此屬性。答案是肯定的!在此之前,我們需要指定圖像的寬度,以便 margin 屬性能夠平均拆分空白區域。

  我們需要記住的另一件事是,margin 屬性不適用于內聯級元素。在這里,我們的圖像是內聯的,因此我們將通過將顯示屬性設置為塊來將其轉換為塊元素。

6

  使用位置和變換屬性將 div 中的圖像水平居中

  這種方法可能很棘手,但我們將逐步進行,以免出現任何錯誤。首先,我們將設置位置屬性,然后設置轉換屬性。

  因此,現在您需要首先將容器的位置設置為相對位置,并將圖像位置設置為絕對位置。通過這樣做,您可以向左,向右,頂部和底部移動圖像。

  但現在我們只想向左移動50%或向右移動50%?,F在它將如下圖所示。

7

  如您所見,它仍然不能完美地放置在中心。這是因為我們尚未分配轉換屬性,我們將將其值設置為 translateX。

8

  使用顯示彈性水平居中 div 中的圖像

  如您所見,使用位置和轉換屬性可能是一項繁瑣的任務。CSS 彈性框使制作響應式布局變得更加容易。我們還可以使用它通過利用具有值flex的顯示屬性將圖像水平放置在容器的中間。

  僅此一項是行不通的,您需要定義圖像的位置。它可以是中心,左和右:

9

  讓我們看一下如何在 div 中垂直居中圖片。稍后,我們將介紹如何將 div 中的圖像水平和垂直居中,從而創建一個完美的中心。

  將 div 中的圖像垂直居中

10

  使用顯示撓曲將 div 中的圖像垂直居中

  以前,我們使用顯示-flex方法水平居中。我們將使用類似的方法。

  這一次,您不需要使用對齊內容屬性。請改用對齊項屬性。

11

  若要使此方法正常工作,請確保指定了容器的高度。以便您可以計算 div 分量的中心。

  使用位置和變換屬性垂直居中 div 中的圖像

  你將要做一些類似于你所做的水平居中的事情。

  這一次,您不會使用左或右,而是使用頂部和底部來確保垂直居中。當我們需要垂直移動圖像時,我們將使用過渡屬性值作為plainY。

12

  在 div 中將圖像居中

13

  使用顯示-flex 將 div 中的圖像居中

  為了將圖像垂直和水平居中,應使用 display-flex 屬性。

  為此,請將兩端對齊內容和對齊項屬性設置為值中心。

14

  使用位置和變換屬性在 div 中居中圖像

  您一定從以前的方法中得到了一個想法,即我們正在組合從水平和垂直居中學到的屬性。這也是你現在要做的。

15

  您還可以使用翻譯 (X,Y) 組合翻譯 X 和翻譯Y。

16

  結語

  在本教程中,你已了解如何使圖像在 div 中垂直、水平或兩者居中。

  將圖像居中時,您會經常選擇Flexbox方法,而不是難以使用的位置方法,這可能會扭曲您的網站。

聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。

10年以上業內強師集結,手把手帶你蛻變精英

請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通

免費領取

今日已有369人領取成功

劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取

推薦閱讀

最新文章

開班信息
北京校區
  • 北京校區
  • 大連校區
  • 廣州校區
  • 成都校區
  • 杭州校區
  • 長沙校區
  • 合肥校區
  • 南京校區
  • 上海校區
  • 深圳校區
  • 武漢校區
  • 鄭州校區
  • 西安校區
  • 青島校區
  • 重慶校區
  • 太原校區
  • 沈陽校區

久久国产精品无码HDAV