CSS樣式讓文字水平居中和垂直居中的方法

2021-10-11 18:59:45 字數 697 閱讀 5891

css中讓文字居中,首先可以分單行文字和多行文字,還可以討論高度是否固定。

不論是多行文字還是單行文字,水平居中都可以設定text-align。

text-align 屬性規定元素中的文字的水平對齊方式。

垂直方向居中如下

一、高度固定

單行文字

垂直居中,則設定line-height等於盒子的高度。

.box

多行文字

display:table-cell指讓標籤元素以**單元格的形式呈現,使元素類似於td標籤。ie8+及現代版本的瀏覽器都支援此屬性,ie6/7不支援(可用其他方法實現類似效果)。同樣,display:table-cell屬性也會被float,position:absolute等屬性破壞效果,應避免同時使用。

設定了display:table-cell的元素對寬度高度敏感,對margin值無反應。

.box

二、高度不固定

單行文字與多行文字的方法一樣,

給盒子新增個內邊距,讓文字與邊框之間有點距離。

.box

後期學習了新的方法再新增居中方法。

CSS 垂直居中和水平居中

position relative width 500px height 500px background color ddd content background color 6699ff width 50 height 50 position absolute top 25 left 25 這兩...

CSS垂直居中和水平居中

總括 css居中一直是乙個比較敏感的話題,為了以後開發的方便,樓主覺得確實需要總結一下了,總的來說,居中問題分為垂直居中和水平居中,實際上水平居中是很簡單的,但垂直居中的方式和方法就千奇百怪了。人生用物,各有天限 夏澇太多,必有秋旱。水平居中設定 行內元素 設定 text align center ...

CSS 水平居中和垂直居中

1 水平居中 行內元素 text align center 2 水平居中 定寬塊狀元素 margin auto,滿足定寬和塊狀兩個條件的元素是可以通過設定 左右margin 值為 auto 來實現居中的。3 水平居中 不定寬塊狀元素 不定寬度的塊狀元素有三種方法居中 這三種方法目前使用的都很多 1 ...