1.浮动(float),这种情况下默认横向是left,纵向是top方向,所以默认就满足顶端对其;
2.定位(position),这种情况下只要设置要top的值就可以了;
3.display:inline-block;这种情况下,一般不是顶端对其,必须在父级加上一条样式:vertical-align: top才能实现顶端对其。
在CSS中的vertical-align属性是设置元素垂直对齐的方式
需要注意的是:
vertical-align属性定义行内元素的基线是相对vertical-align这个元素所在行的基线的垂直对齐。
是会允许指定负长度值和百分比值的。
这样是会导致vertical-align元素降低,并非是升高的。
在单元表格中,vertical-align属性是能设置单元格框中的
单元格内容的对齐方式的
vertical-align属性的浏览器支持情况如下:
目前所有的浏览器都是支持vertical-align的属性的
但是需要注意的是:无论是任何的版本的
Internet
Explorer,包括
IE8在内,都是不支持 "inherit"这个属性值的。
vertical-align属性的实例介绍如下:
垂直对齐一幅图像的实力介绍:
img { vertical-align:text-top}
实现这个效果我给你2种方法!
第一
用dl
dt
dd
结构
<dl>
<dt>前面的小图标</dt>
<dd>文字</dd>
</dl>
在写样式控制
第二
给li里面的文字(a标签)定义背景
这个
应该很实用!
结构
<ul
class="style">
<li><a
href="#">
wenzi
</a></li>
</ul>
样式
.style
li
a
{background:url(前面小图片的路径)
no-repeat
3px
3px(定义小图片的位置,可以自己调试);padding-left:10px(要是小图片后面的文字离图片近了可以这样定义);