行垂直对齐问题

最新推荐文章于 2024-07-08 10:45:17 发布

wks1986

最新推荐文章于 2024-07-08 10:45:17 发布

阅读量96

点赞数

分类专栏： WWW 文章标签： HTML CSS 上对齐

WWW 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是一个画廊页面，一行一行地显示图片和描述。

HTML如是写：


<!DOCTYPE html>
<html>
    <head>
        <title>Gallery</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="gallery.css" />
    </head>
    <body>
        <h1>Gallery</h1>
        <ul class="gal">
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">复杂标签</a>
                <a href="#a">复杂标签</a>
                <a href="#a">复杂标签</a>
                <a href="#a">复杂标签</a>
                <a href="#a">复杂标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">有时候你会遇到很复杂的标签，<br />可能会有很多行，<br />就像这样。</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
            <li>
            <div class="pic">
                <a href="#a">
                    <img src="test.png" />
                </a>
            </div>
            <div class="label">
                <a href="#a">简单标签</a>
            </div>
            </li>
        </ul>
    </body>
</html>

CSS如是写：


.gal {
    width: 900px;
    background: #ffccff;
}

.gal li {
    display: inline-block;
    width: 200px;
    border: 1px solid #f00;
    background: #ccffcc;
}

得到如下效果：
[img]http://dl.iteye.com/upload/attachment/502918/bd6001d7-1b89-355c-be84-99cf4e0d24cb.png[/img]

配色虽丑陋，但可以看见每个盒子占据的空间。

于是发现问题：理想的结果是，图片按上边沿对齐。

解决的方法自然是使用css的vertical-align属性。但是如何使用呢？

W3C的CSS2.1 Recommendation如是说：
[quote]
10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:

1. The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)
2. [i]The inline-level boxes are aligned vertically according to [b]their[/b] 'vertical-align' property.[/i] In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
3. The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)
[/quote]
来自： http://www.w3.org/TR/CSS21/visudet.html#line-height

大意是说，以inline方式处理的一堆元素，包括display:inline或者inline-block或者inline-table的，会被排列成一行一行，每行是line-box，每个line-box以某种方式计算其行高。

注意第2条第一句（斜体），尤其是“their”这个单词（粗体）。line-box中，每个元素的垂直对齐方式，由该元素自己的vertical-align属性决定，而不是容器的。

所以，要让上例中，画廊中每幅画以上端对齐，就要设定每个<li>的vertical-align属性。于是，css要改成这样：


.gal {
    width: 900px;
    background: #ffccff;
}

.gal li {
    vertical-align: top;
    display: inline-block;
    width: 200px;
    border: 1px solid #f00;
    background: #ccffcc;
}

现在的效果是这样：
[img]http://dl.iteye.com/upload/attachment/502930/cd05a421-4764-3acb-9897-97bac9d14bc9.png[/img]

是我们期待的效果。

总结：

[list]
[*] li的display属性设定为inline-block，使之如inline元素一样横向排列、自动折行，又如block元素一样，可以包含很多东东。
[*] li的vertical-align属性设定为top，顶端对齐。
[*] vertical-align属性不应设置在ul元素上。这是通常的错误。
[/list]