如何使用css实现一个简单的顶部对齐

html-css09

如何使用css实现一个简单的顶部对齐,第1张

要让div顶端对其,那么就必须根据HTML的布局和css样式的对其方式决定了:

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(要是小图片后面的文字离图片近了可以这样定义);