-
vertical-align的百分比值是根据line-height来计算的
查看全部 -
数值就是在baseline的基础上向上偏移的量
查看全部 -
数字和百分比的共性：
1、都带数字
2、都支持负值
3、行为表现一致
查看全部 -
vertical-align的一些属性值类型，baseline为默认值
查看全部 -
消除img下面多出的一块
设置本身display:block
设置本身vertical-align:top
设置本身vertical-align:bottom
设置父元素line-height: 0
设置父元素font-size: 0
查看全部 -
<span>文字<br/>文字<br/>文字<br/>文字<br/></span>
多行文本的实现
查看全部 -
多行文字与图片的对齐，文字设置display:inline-block, width:xxx, vertical-align:middle, 图片设置vertical-align: middle
查看全部 -
使用display:table-cell垂直居中时，父元素设置dispaly:table-cell, vertical-algin:middle, 子元素不用设置就可以自动居中
查看全部 -
vertical-algin 子元素为inline，vertical-align:middle，但是父元素的行高要等于父元素的高度，才能体现出子元素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: 应用于inline水平及table-cell
查看全部 -
1、小图标和文字的对齐：
2、不定尺寸图片或多行文字的垂直居中：
1）主题元素inline-block化
2）0宽度100%高度辅助元素
3）vertical-align：middle；
查看全部 -
vertical-align上标下标类：
1、vertical-align：super；
提高盒子的基线到父级合适的上标基线位置
2、vertical-align：sub；
降低盒子的基线到父级合适的下标基线位置
查看全部 -
vertical-align文本类属性：
1、vertical-align：text-top/text-bottom；
盒子的顶部/底部与父级content area的顶部/底部对齐
查看全部 -
两个元素类似，但是它们不对齐
查看全部
举报