一.CSS 區塊元素( block elements)水平對齊

介紹 水平對齊(Align)屬性與屬性值應用

本章節用於區塊元素( block elements)的對齊是相對於向外瀏覽器畫面的對齊,與區塊元素內部文字置中對齊是不一樣的樣式語法:

例如: <table> <p><h1> <p> <div> 這類元素


置中對齊 :

margin-left:auto;margin-right:auto;

重點:IE8(含)之前版本瀏覽器 ,需宣告 <!DOCTYPE html> 才有置中對齊作用。

水果名稱 重量 價錢
西瓜 8斤 100元
冬瓜 3斤 50元
南瓜 2斤 35元

從上方表格你可以觀察到它是對外部畫面的置中 , 而表格內部的文字並沒置中對齊.你可以在實驗區加 text-align:center; 做實驗看看


靠左對齊 :(內定位置)

position:absolute;
left:0px;


靠右對齊 :

position:absolute;
right:0px;

範例::表格往右對齊屬性的檢視

範例觀測重點 :

動手實驗一下 : 將 屬性值改變看看變化了什麼

你可以在上方編輯區之<table class='right'>區間內做實驗觀測:

二.改變元素行高與垂直高

例:(框線高度不同, 也就是同樣P元素佔用區塊高度不同)

說明: 框線起來, 是方便您觀察它在版面上的佔用高度

這是內定值未改變前的P元素佔用高度

這是改變後的P元素佔用高度(加了css語法line-height:30px)

三.改變元素垂直高度

例:(元素顯示位置高不同)

這是內定值未改變前顯示位置高處

這是改變後的P元素佔用高度(加了css語法vertical-align:15px)

你可以在上方編輯區之區間內做實驗觀測: