-
vertical-align的百分比值是根據(jù)line-height來計(jì)算的
查看全部 -
數(shù)值就是在baseline的基礎(chǔ)上向上偏移的量
查看全部 -
數(shù)字和百分比的共性：
1、都帶數(shù)字
2、都支持負(fù)值
3、行為表現(xiàn)一致
查看全部 -
vertical-align的一些屬性值類型，baseline為默認(rèn)值
查看全部 -
消除img下面多出的一塊
設(shè)置本身display:block
設(shè)置本身vertical-align:top
設(shè)置本身vertical-align:bottom
設(shè)置父元素line-height: 0
設(shè)置父元素font-size: 0
查看全部 -
<span>文字<br/>文字<br/>文字<br/>文字<br/></span>
多行文本的實(shí)現(xiàn)
查看全部 -
多行文字與圖片的對齊，文字設(shè)置display:inline-block, width:xxx, vertical-align:middle, 圖片設(shè)置vertical-align: middle
查看全部 -
使用display:table-cell垂直居中時(shí)，父元素設(shè)置dispaly:table-cell, vertical-algin:middle, 子元素不用設(shè)置就可以自動居中
查看全部 -
vertical-algin 子元素為inline，vertical-align:middle，但是父元素的行高要等于父元素的高度，才能體現(xiàn)出子元素vertical-align的作用
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
height: 380px;
border:1px solid;
}
p{
font-size: 40px;
background: lightgray;
}
.timg{
vertical-align: text-top;
width: 120px;
}
.bimg{
vertical-align:text-bottom;
width: 120px;
}
span{
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<p><img class="timg" src="img/mm2.png" /><span >20px</span><span >24px</span><span >32px</span><span >40px</span></p>
<br />
<br />
<br />
<p><img class="bimg" src="img/mm2.png" /><span >20px</span><span >24px</span><span >32px</span><span >40px</span></p>
</div>
</body>
</html>
查看全部 -
vertical-align: 應(yīng)用于inline水平及table-cell
查看全部 -
1、小圖標(biāo)和文字的對齊：
2、不定尺寸圖片或多行文字的垂直居中：
1）主題元素inline-block化
2）0寬度100%高度輔助元素
3）vertical-align：middle；
查看全部 -
vertical-align上標(biāo)下標(biāo)類：
1、vertical-align：super；
提高盒子的基線到父級合適的上標(biāo)基線位置
2、vertical-align：sub；
降低盒子的基線到父級合適的下標(biāo)基線位置
查看全部 -
vertical-align文本類屬性：
1、vertical-align：text-top/text-bottom；
盒子的頂部/底部與父級content area的頂部/底部對齊
查看全部 -
兩個(gè)元素類似，但是它們不對齊
查看全部
舉報(bào)