软件开发 on 有点稳

CSS实现垂直居中

Sun, 01 Nov 2015 00:00:00 +0000

在常规的网页中，宽一般有最大限制，而高没有，因而CSS规范并没有给出块级元素和多行文字垂直居中，建议性的实现方案。换句话说，但凡有垂直居中的要求，必然是设计者对包含块的高做了固定限制。

默认的CSS块级元素的高由内容决定，通常内容有多少，高度就会算多少。固定了高意味着设计者必须确认内容的高度不会超过限制，否则会产生不合预期的结果。

众所周知，限制高仅需要指定height样式属性即可。

确认内容高度需要了解内容的组成，可能会是一张可替换的图片，也可能会是一段行数不确定的文本，甚至也可能是另外一个块级元素，每种内容有各自的模型在控制着自己的展示。

情形1: 垂直居中一张图片

图片的模型最简单，行内元素，限制高，宽会等比例缩放。假设要在高度为200px的块中放置一个高度不超过100px的图片，垂直居中可以这样写：

#middleWrapper {
 height: 200px;
 line-height: 200px;
 border-color: black;
 border-width: 1px;
 border-style: solid;
}
#middleWrapper > img {
 vertical-align: middle;
 max-height: 100px;
}

<div class="middleWrapper">
 <img src="/wp-content/uploads/2015/01/violin.jpg">
</div>

上面的代码中重要之处在于line-height恰好等于height，这样整个包含块就变成了一行，在单行内居中行内元素，只需要指定vertical-align是middle即可。

垂直居中一张图片的应用场景很多，比如一个带有标志图片的按钮，再比如购物网站商品页上商品的图片展示（固定的方框内放各种不同尺寸的图片）等。

情形2: 垂直居中一行

这种情况与情形1类似，不同之处在于文字如果一行放不下会换行，当换出新的一行，文字便超出了包含块，这时通常的处理手法是将超出部分隐藏（overflow: hidden）。更加普遍的做法是设置样式属性white-space为nowrap不允许文字换行，并且将超出部分换用三个点代替（text-overflow: ellipsis）。下面的例子中，将内容超过一行的文本，垂直居中地放在高200px的包含块中，并且只显示一行。

#middleWrapper {
 height: 200px;
 line-height: 200px;
 text-overflow: ellipsis;
 overflow: hidden;
 border-color: black;
 border-width: 1px;
 border-style: solid;
}
#middleWrapper > span {
 vertical-align: middle;
 white-space: nowrap;
}

<div class="middleWrapper">
 <span>It is a truth universally acknowledged that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.</span>
</div>

It is a truth universally acknowledged that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.

注意white-space属性可以放在包含块中或是直接放在文本标签中均可，因为这个属性允许继承，并且只能作用在文本上。两个overflow属性却要放在包含块中，用户代理需要根据包含块的高度进行计算隐藏掉那一部分文字。值得一提的是text-overflow属性是CSS3中加入的新内容，主流浏览器都支持，但也有些例外，比如UC浏览器的Android手机版。

垂直居中一行文字的应用场景包括按钮上的文字，水平导航栏中的文字等等。

情形3: 垂直居中几行文字

如果要垂直居中的文字行数是确定的，并且包含块框的高度恰好等于总行框的高度，那么只需要将包含块的高度设置为总行框高度即可。例如有两行，字体13px，每行行高17px，那么包含块的高度为34px。

这种情形最常见的应用场景是移动购物网站，浏览页商品描述的格式。这种场景下往往也要求能够隐藏多出来的行，以及将多出的部分替换为三个点。这种做法，纯粹的CSS无法胜任，只能计算出行宽，估算出展示的字符数用JS脚本控制。说估算是由于英文字体多数不是等宽，如果无法知道每个字母的宽度，难以精确地算出要展示的字符数目。

情形4: 垂直居中一段文字

当一段文字行数不确定，且包含块的高度一定大于总行框高度时，需要将整段文字放在一个不限制高的行内块级元素中，像下面的写法一样：

#middleWrapper {
 height: 200px;
 line-height: 200px;
 border-color: black;
 border-width: 1px;
 border-style: solid;
}
#middleWrapper > div {
 vertical-align: middle;
 display: inline-block;
 line-height: 1.5;
 text-align: justify;
}

<div class="middleWrapper">
 <div>It is a truth universally acknowledged that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.</div>
</div>

不同于单行元素的居中，多行元素的line-height需要重置成较小的值，上面例子中取了文字的1.5倍，远小于父级元素的200px。将块级元素变成行内块级元素也是关键。如果仍旧只是块级元素，即使充值了line-height也不会生效，因为块级元素的一行会去和父级包含块的一行去居中对齐。

这种情况的应用场景极少遇到，恐怕只有按照列为主题布局时，才可能需要。

另外有一种通行的做法是将要居中的内容放置在一个单元格中，这种方案可以应对以上所有情况。

#middleWrapper {
 height: 200px;
 line-height: 1.5;
 vertical-align: middle;
 display: table-cell;
 border-color: black;
 border-width: 1px;
 border-style: solid;
}

<div class="middleWrapper">
It is a truth universally acknowledged that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.
</div>

此外，还有一些方法也可行，但显得不够优雅，比如设定上下的padding为某个固定值可以应对某些情形等。

CSS基本语法的总结

Fri, 07 Jan 2011 00:00:00 +0000

今天系统的学习了一下CSS(Cascading Style Sheets)的语法。之前看书时候感觉很乱但最后总结下来其实也就两个大的方面。现在记录下来以便帮助以后回顾。

CSS代码放置的位置

1. 内联式样式表

这里是指的每个html标签都有一个基本属性style，直接可以利用style设置该标签的样式。例如：

<p style="font-family:Times New Roman; color:blue">content with decoration</p>

2. 嵌入式样式表

要对同一个页面中某种标签都产生统一的样式，而不必要采用上面的第一种方式，提高了代码的重用性。这种方式需要将代码放置在页面的head标签中，如下：

<head>
 <style type="text/css">
 <!--
 p {
 font-family: Times New Roman;
 color: blue;
 }
 //-->
 </style>
</head>

按这种方式定义的只要该页面中使用<p></p>标签，则会使用该样式，除非定义自身的style属性则会覆盖全局的设定。

3. 外部样式表

为了进一步提高代码的复用性，有时候许多的页面会采用同样的样式，这样就有必要将相同的样式部分提取成一个专门的叠层样式文件，后缀名通常为.css。如果要在某个html中使用它，则需要用如下的语句包含进去，并且放置在<head></head>中：

<link rel="stylesheet" type="text/css" href="外部css文件名">

4. 输入样式表

这种方式是提供css文件中包含另外一个css的语法。当然也能够在html的嵌入式样式定义中使用。使用方法就是包含如下的语句：

@IMPORT url("外部css文件名");

样式选择器

样式选择器一般说是六种，实际个人感觉就是四种基本的加上两种不同的复合定义方式。样式的定义本身就是属性的关键字style。后来为了提供全局的加入了style标签。但是无论采用上面提到四种方式的哪一种都只是针对具体某个标签或者全部的某种标签。例如页面中有十个p标签，如果想让其中4个有一组修饰样式，另外6中为另外一种修饰样式，则只能单个的定义每个p的style属性。代码量最少也就是定义一个全局的控制其中6个一致的，剩余的4个分别定义。但引入class样式选择器后上面的问题的解决就方便的多，只需要定义两个。css样式选择器使得样式的定义方式多种多样，这里就不做过多的个人体会了，重点说总结。样式选择器的六种分别是：

1. html选择器

这个是最基本的css修饰的对象，即每个body以内的html标签一般都可以修饰。

2. class选择器

每个html标签基本都有一个class属性使得它们即便标签名不同，也能够具有同样的修饰样式。

如果针对的是某中标签，则为如下定义方式：

<style type="text/css">
<!--
 p.tradition {
 font-family: Times New Roman;
 color: blue;
 }
//-->
</style>

使用时

```html
<p class="tradition">content with decoration</p>

如果要想让不同标签名的标签具有相同的修饰方式，只需以点开始定义样式，如下：

<style type="text/css">
<!--
 .tradition {
 font-family: Times New Roman;
 color: blue;
 }
//-->
</style>

使用时

```html
<p class="tradition">content with decoration</p>
<a class="tradition" href="index.html">content with decoration</a>

3. id选择器

id选择器也是利用每个标签的另外一个属性，id. 进行定义，类似于class，但需要以进号开头，由于id名的唯一性，通常id用于定义div标签中整个区域块的修饰。定义方式：

<style type="text/css">
<!--
 #top{
 font-family: Times New Roman;
 color: blue;
 }
//-->
</style>

引用时

<div id="top"></div>

4. 伪元素选择器

有些标签不同属性代表不同的状态，也可以具有当前状态的修饰，常用的就是链接标签a. 如下面的定义

<style type="text/css">
<!--
 a:link {
 text-decoration: none;
 font-family: Times New Roman;
 color: blue;
 }

 a:hover {
 font-weight: bold;
 font-family: Times New Roman;
 color: blue;
 }
//-->
</style>

**5. 关联选择器**

关联选择器相当于对标签之间做了次且运算，只有按照定义标签之间的组合顺序才能够正确的应用该定义的样式，比如下面的定义：

```html
<style type="text/css">
<!--
 center h1 em {
 font-family: Times New Roman;
 color: blue;
 }
//-->
</style>

上面的组合情况说明只有center标签里面有h1标签，并且h1中套用了em标签的情况下才能正确的应用该样式。如下的使用：

<center>
 <h1>This is a <em>test</em></h1>
</center>

注意上面例子的显示结果只有test是蓝色的。另外需要注意的是几个标签之间都是空格分隔。

当然关联也不止局限于html标签，当然也可以是自己定义class标签和id标签。如下的定义：

<style type="text/css">
<!--
 #tradition .top em {
 font-family: Times New Roman;
 color: blue;
 }
//-->
</style>

使用规则还是一样，必须同时满足定义顺序的才可以生效。

6. 组合选择器

组合选择器相当于同一样式应用于不同标签，或者不同类别，不同id的简化定义。各个标签、class名或者id名之间使用逗号，即","，隔开。应用方式如下：

<style type="text/css">
<!--
 #tradition, .top, em, h1 {
 font-family: Times New Roman;
 color: blue;
 }
//-->
</style>