Javascript 中心文本

| | | | | | | | | | | | | | | |

在本 CSS 教程中,我們將了解如何使文本居中和鎖定元素。您可以使用幾個技巧在佈局中將元素水平和垂直居中。

要在較大元素中居中對齊文本,請使用 text-align: center;,如下所示:

我是一個div

並且所有的文字都通過text-align居中:center

居中對齊塊元素:

塊元素的居中最好使用 HTML 文檔的 標籤來說明。您需要做的是檢查容器的整體寬度,然後將邊距設置為 auto:

我是一個 div

並且所有的文本都以 text-align: center

為中心

將圖像居中對齊:

要使圖像居中,在 CSS 選擇器中,修改批量顯示,然後控制圖片元素的寬度,使用 %px。將 margin 設置為 auto:

我是一個 div

並且所有的文本都以 text-align: center

為中心

要將底層圖像居中,將顯示更改為塊狀,然後將邊距設置為自動,使用 px 或%檢查寬度

kittens

在 div 中垂直和水平居中:

填充:

要在 中的填充 - 然後您可以使用 text-align: center 將段落水平居中:< br >

我是一個 div

並且所有的文本都以 text-align: center

為中心

要將底層圖像居中,將顯示更改為塊狀,然後將邊距設置為自動,使用 px 或%檢查寬度

kittens

line-height:

您還可以將 line-height 設置為您使用文本居中的塊元素的高度 -align: center 以將元素與中心對齊。如果您有多行,請在父子節點上使用 line-height 並將 vertical-align: middledisplay: inline-block 添加到子節點:



flexbox:

最後,我們可以使用 flexbox 使元素居中。將 display: flex 設置為要居中的子元素的父元素,然後使用 align-items 和 require-content 使其居中:


這些是解決佈局中元素居中問題最常用的方法。