CSS 佈局 - 水平 & 垂直對齊

時間 2020-04-29

標籤 css 佈局水平垂直對齊欄目 CSS 简体版

原文原文鏈接

CSS 佈局 - 水平 & 垂直對齊

1、元素居中對齊

要水平居中對齊一個元素(如 <div>), 能夠使用 margin: auto;。瀏覽器

設置到元素的寬度將防止它溢出到容器的邊緣。佈局

元素經過指定寬度，並將兩邊的空外邊距平均分配：spa

.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px;
}

注意: 若是沒有設置 width 屬性(或者設置 100%)，居中對齊將不起做用。code

2、文本居中對齊

若是僅僅是爲了文本在元素內居中對齊，能夠使用 text-align: center;orm

.center { text-align: center; border: 3px solid green;
}

3、圖片居中對齊

要讓圖片居中對齊, 能夠使用 margin: auto; 並將它放到塊元素中:blog

img { display: block; margin: auto; width: 40%;
}

4、左右對齊 - 使用定位方式

咱們能夠使用 position: absolute; 屬性來對齊元素:圖片

.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px;
}

註釋：絕對定位元素會被從正常流中刪除，而且可以交疊元素。it

提示: 當使用 position 來對齊元素時, 一般 <body> 元素會設置 margin 和 padding 。這樣能夠避免在不一樣的瀏覽器中出現可見的差別。io

當使用 position 屬性時，IE8 以及更早的版本存在一個問題。若是容器元素（在咱們的案例中是 <div class="container">）設置了指定的寬度，而且省略了 !DOCTYPE 聲明，那麼 IE8 以及更早的版本會在右側增長 17px 的外邊距。這彷佛是爲滾動條預留的空間。當使用 position 屬性時，請始終設置 !DOCTYPE 聲明：form

body { margin: 0; padding: 0;
} .container { position: relative; width: 100%;
} .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6;
}

注意: 當使用浮動屬性對齊,老是包括 !DOCTYPE 聲明!若是丟失,它將會在 IE 瀏覽器產生奇怪的結果。

5、左右對齊 - 使用 float 方式

咱們也能夠使用 float 屬性來對齊元素:

.right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px;
}

當像這樣對齊元素時，對 <body> 元素的外邊距和內邊距進行預約義是一個好主意。這樣能夠避免在不一樣的瀏覽器中出現可見的差別。

注意：若是子元素的高度大於父元素，且子元素設置了浮動，那麼子元素將溢出，這時候你能夠使用 "clearfix(清除浮動)" 來解決該問題。

咱們能夠在父元素上添加 overflow: auto; 來解決子元素溢出的問題:

.clearfix { overflow: auto;
}

當使用 float 屬性時，IE8 以及更早的版本存在一個問題。若是省略 !DOCTYPE 聲明，那麼 IE8 以及更早的版本會在右側增長 17px 的外邊距。這彷佛是爲滾動條預留的空間。當使用 float 屬性時，請始終設置 !DOCTYPE 聲明：

body { margin: 0; padding: 0;
} .right { float: right; width: 300px; background-color: #b0e0e6;
}

6、垂直居中對齊 - 使用 padding

CSS 中有不少方式能夠實現垂直居中對齊。一個簡單的方式就是頭部頂部使用 padding:

.center { padding: 70px 0; border: 3px solid green;
}

若是要水平和垂直都居中，能夠使用 padding 和 text-align: center:

.center { padding: 70px 0; border: 3px solid green; text-align: center;
}

7、垂直居中 - 使用 line-height

.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center;
}
 
/* 若是文本有多行，添加如下代碼: */ .center p { line-height: 1.5; display: inline-block; vertical-align: middle;
}

8、垂直居中 - 使用 position 和 transform

除了使用 padding 和 line-height 屬性外,咱們還能夠使用 transform 屬性來設置垂直居中:

.center { height: 200px; position: relative; border: 3px solid green; 
} .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

9、示例

（1）示例1：使用margin讓div居中對其

div { margin-left: auto; margin-right: auto; width: 300px; background-color: #b0e0e6;
}

（2）示例2：使用絕對定位讓div對其

div { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。