这是一个画廊页面,一行一行地显示图片和描述。
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;
}
得到如下效果:
配色虽丑陋,但可以看见每个盒子占据的空间。
于是发现问题:理想的结果是,图片按上边沿对齐。
解决的方法自然是使用css的vertical-align属性。但是如何使用呢?
W3C的CSS2.1 Recommendation如是说:
引用
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. The inline-level boxes are aligned vertically according to their 'vertical-align' property. 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.)
来自: 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;
}
现在的效果是这样:
是我们期待的效果。
总结:
- li的display属性设定为inline-block,使之如inline元素一样横向排列、自动折行,又如block元素一样,可以包含很多东东。
- li的vertical-align属性设定为top,顶端对齐。
- vertical-align属性不应设置在ul元素上。这是通常的错误。
- 大小: 30.1 KB
- 大小: 28.6 KB
分享到:
相关推荐
radio和文字垂直对齐,单选框和文字垂直对齐,兼容各大主流浏览器,附带样例代码,一看就会,一用网不了!呵呵
1 这个软件可以自动、批量地转换文本文件。 2 使得文件的每一行内容按中间一个字符串(例如 =)垂直对齐。 3 将文件中的\t全部转换为4个空格。
Div垂直对齐 CSS+Div 底端对齐 垂直对齐
设定单元格的垂直对齐方式。01 <!– —————————— –>02 <!– 文件范例:10-31.htm –>03 <!– 文件说明:设定单元格垂直对齐 –>04 <!– —————————— –>05 <HTML>06 <HEAD&...
解决DBGERIEH文本中对齐问题,DBGERIEH文本并不能垂直中对齐,当行高较大时不美观,修改DBGERIEH.pas可达到垂直中对齐
在实际网页中,如何实现如何实现父容器高度固定,文字可能一行,两行或更多行的垂直居中对齐呢? 实现的关键是把文字当图片处理。 用一个span标签将所有的文字封装起来,设置文字与图片相同的display属性...
NULL 博文链接:https://qiyan86-163-com.iteye.com/blog/549996
这两天写个页面css的时候用到了vertical-align属性,使用...长度> | inherit 说明: 设置元素内容的垂直对齐方式 值: baseline:基线对齐;sub:下标;super:上标;top:顶端对齐;text-top:与文本的顶端对齐;middl
本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐!更多内容请参考本站的CSS视频教程。 CSS使图片垂直居中的代码: <!DOCTYPE ...
本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法。分享给大家供大家参考。具体分析如下: 有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于...
本文实例讲述了JS实现控制表格行内容垂直对齐的方法。分享给大家供大家参考。具体分析如下: 下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶、可以居中、可以底部对齐 <!DOCTYPE html> <...
本文实例讲述了JS实现控制表格单元格垂直对齐的方法。分享给大家供大家参考。具体如下: 下面的代码控制指定的单元格靠底部垂直对齐 <!DOCTYPE html> <html> <head> [removed] function valignCell...
为了使表单元素和文字都垂直居中对齐,当文本框和下拉框都没问题,但是单选框和复选框就了,经过反复测试终于完整搞定与大家分享,感兴趣的各位可不要错过了哈
NULL 博文链接:https://w-shuang13-163-com.iteye.com/blog/1141499
易语言源码易语言文本垂直居中源码.rar 易语言源码易语言文本垂直居中源码.rar 易语言源码易语言文本垂直居中源码.rar 易语言源码易语言文本垂直居中源码.rar 易语言源码易语言文本垂直居中源码.rar 易语言源码...
matlab开发-在3绘图中对齐轴标签。将当前轴的X、Y和Z标签与三维绘图的X、Y和Z轴对齐。
关于图片垂直居中显示,想必很多写css的人都研究过、或者说是搜寻过方法,下面这篇文章就给大家介绍关于图片与文字垂直方向不对齐问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的...
崇高的VAlign Sublime Text 2和3的插件,添加了快捷方式,可以轻松地使光标周围的文本垂直对齐。 只需按Cmd+\ (Mac)或Ctrl+\ (Windows / Linux),您周围的代码就会自动对齐。 该插件最初基于的插件。 该插件通过...
DreamWeaver文字怎么居中对齐?DreamWeaver中输入的文字想要实现居中对齐,该怎么居中呢?下面我们就来看看dw垂直居中对齐的技巧,需要的朋友可以参考下