CSS布局 三 對齊方式

2022-07-05 11:06:11 字數 1303 閱讀 9046

如果被設定元素為文字、等行內元素時，在父元素中設定text-align:center實現行內元素水平居中，將塊級元素的display設定為inline-block，使塊級元素變成行內元素，也可以水平居中。

demo
1.當被設定元素為定寬塊級元素時用 text-align：center 就不起作用了。可以通過設定「左右margin」值為「auto」來實現居中的。

demo


.child
2.為「不定寬度的塊級元素」設定居中,可以直接給不定寬的塊級元素設定text-align：center來實現，也可以給父元素加text-align:center 來實現居中效果。當不定寬塊級元素的寬度不要佔一行時，可以設定display 為 inline 型別或inline-block（設定為 行內元素 顯示或行內塊元素）。



.container


.container ul


.container li
父元素是盒子容器且高度已經設定

1.子元素是行內元素，高度是由其內容撐開的

設定父元素的行高（line-height）等於本身的高

111111


.wrap


.span
2.子元素是塊級元素但是子元素高度沒有設定

11111


.wrap


.non-height
3.子元素是塊級元素且高度已經設定

111111


.wrap


.div1
1.水平對齊+行高

text-align + line-height實現單行文字水平垂直居中

2.水平+垂直對齊

text-align + vertical-align,在父元素設定text-align和vertical-align，並將父元素設定為table-cell元素，子元素設定為inline-block元素,若子元素是影象，可不使用table-cell，而是其父元素用行高替代高度，且字型大小設為0。子元素本身設定vertical-align:middle.

3.相對+絕對定位

測試文字
4.相對+絕對定位+transform

測試文字


.parent


.child
5.flex

測試文字


.parent

C 11學習（1） 對齊方式

alignas c 是能夠面向記憶體程式設計的，這個與繼承自c。有時候我們在寫操作原始記憶體 的時候，我們需要指定記憶體分配是時的對齊方式，c 11提供了相應的語法 alignas alignas double unsigned char c 1024 字元陣列，但是卻以double資料的形式對齊資...

css3 對齊 分類 導航欄

1 對齊操作 div line height 行高 max height max width min width min height width height 2 分類操作 屬性 clear 設定乙個元素的側面是否允許其他的浮動元素 cursor 規定當指向某個元素之上時顯示的指標型別 displ...

朝花夕拾《精通CSS》三 對一些標籤元素的使用

翻出我4年前看的 精通css 一書，可惜當初沒有整理讀書筆記的習慣，最近又很少寫前端，遂很多東西 知識點遺忘了，恰且現在 css 也有些變化和進步，遂一起打包整理，輸出成幾篇 blog 系列，以犒自己。1 字型 字型分serif 有襯線 和sans serif 無襯線 sans serif 被認為是...