IT培訓(xùn)網(wǎng)
IT在線學(xué)習(xí)
3. transform + absolute
absolute定位元素的left、top屬性是子元素的左邊界、上邊界相對(duì)父元素進(jìn)行定位;transform是CSS3中非常強(qiáng)大的一個(gè)屬性,可以接收多個(gè)屬性值,包括旋轉(zhuǎn)、縮放、平移等多種功能。這里使用二者配合,先將子元素左上定點(diǎn)定位到父元素中心點(diǎn),再使用transform將子元素中心點(diǎn)移動(dòng)到父元素的中心點(diǎn)即可:
- .container {
- width: 300px;
- height: 300px;
- position: relative;
- border: 1px solid red;
- }
- .content {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- border: 1px solid green;
- }
這個(gè)方法有個(gè)小缺陷,就是translate函數(shù)的參數(shù),最后的計(jì)算值不能為小數(shù),否則有的瀏覽器渲染出來效果會(huì)模糊,所以使用本方法的話最好設(shè)置一下寬高為偶數(shù)。
4. absolute+margin負(fù)值
與上一種方法很類似,上一種方法是使用transform將元素向左上平移,本方法則是使用margin負(fù)值的方式將元素拉向左上角。
代碼:
- .container {
- width: 300px;
- height: 300px;
- position: relative;
- border: 1px solid red;
- }
- .content {
- position: absolute;
- left: 50%;
- top: 50%;
- width: 200px;
- height: 100px;
- margin-top: -50px;
- margin-left: -100px;
- border: 1px solid green;
- }
5. absolute + calc
從上兩種方法可以看到,absolute設(shè)置了left和top再通過平移或者margin將元素重新定位回去。如果我們直接可以計(jì)算出正確的left和top值,豈不是一次到位?calc函數(shù)正有此功能,當(dāng)然我們需要知道子元素的寬高:
- .container {
- width: 300px;
- height: 300px;
- border: 1px solid red;
- text-align: center;
- position: relative;
- }
- .content {
- position: absolute;
- border: 1px solid green;
- width: 200px;
- height: 100px;
- left: calc(50% - 100px);
- top: calc(50% - 50px);
- }
6. line-height + vertical-align
vertical-align是一個(gè)作用于內(nèi)聯(lián)元素的屬性。內(nèi)聯(lián)元素的特性是會(huì)和其它內(nèi)聯(lián)元素或者文字在同一行顯示,但是默認(rèn)情況下是與父元素“基線對(duì)齊”的。這里的的基線指的是父元素每一行中的一個(gè)垂直位置,是英文x下邊緣所在的水平, 通過設(shè)置vertical-align為middle可以將內(nèi)聯(lián)元素的中部對(duì)齊父元素的中部(基線+字母x的一半高度)。所以可以利用這一點(diǎn),將父元素的行高設(shè)置為其自身高度,然后將子元素與父元素中線對(duì)齊,即可實(shí)現(xiàn)垂直居中。
代碼:
- .container {
- width: 300px;
- height: 300px;
- border: 1px solid red;
- line-height: 300px;
- text-align: center;
- }
- .content {
- display: inline-block;
- line-height: 1.5;
- border: 1px solid green;
- vertical-align: middle;
- }
>>本文地址:http://uj2y2uok.com/zhuanye/2020/53435.html
聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
1 您的年齡
2 您的學(xué)歷
3 您更想做哪個(gè)方向的工作?