xml地图|网站地图|网站标签 [设为首页] [加入收藏]
的基友关系,如何只用CSS做到完全居中
分类:web前端

如何只用CSS做到完全居中

2013/10/11 · CSS · 11 评论 · CSS, 居中

本文由 伯乐在线 - 埃姆杰 翻译。未经许可,禁止转载!
英文出处:codepen.io。欢迎加入翻译组。

【感谢@埃姆杰 的热心翻译。如果其他朋友也有不错的原创或译文,可以尝试提交到伯乐头条。】

我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中……直到现在。但是,请注意!想让元素绝对居中,只需要声明元素高度,并且附加以下样式,就可以做到:

CSS

.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

1
2
3
4
5
.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

我并不是第一个发现这种方法的人(不过我还是敢把它叫做“完全居中”),它有可能是种非常普遍的技巧。但大多数介绍垂直居中的文章中并没有提到过这种方法。如果不是浏览这篇文章的评论,我甚至根本就不会发现这个办法。

上面那篇文章的评论栏中,Simon提供了一个jsFiddle的链接,其他的方法相比之下就相形见绌了。(Priit也在评论栏中提到了同样的方法)。深入研究了一番之后,我又用某些关键词找到了记载这种方法的三个网站:站点一、站点二、站点三。

以前从未用过这种方法的我想试试,看看这种”完全居中”的方法到底有多么神奇。 好处:

  • 跨浏览器,兼容性好(无需hack,可兼顾IE8~IE10)
  • 无特殊标记,样式更精简
  • 自适应布局,可以使用百分比和最大最小高宽等样式
  • 居中时不考虑元素的padding值(也不需要使用box-sizing样式)
  • 布局块可以自由调节大小
  • img的图像也可以使用

同时注意:

  • 必须声明元素高度
  • 推荐设置overflow:auto;样式避免元素溢出,显示不正常的问题
  • 这种方法在Windows Phone上不起作用

浏览器支持:Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”经测试可以完美地应用在最新版本的Chrome、Firefox、Safari、Mobile Safari中,甚至也可以运行在IE8~IE10上

 

CSS 深入理解 vertical-align 和 line-height 的基友关系

2015/08/31 · CSS · 1 评论 · line-height, vertical-align

原文出处: 张鑫旭(@张鑫旭)   

SASS用法指南

2012/06/21 · CSS · CSS

来源:阮一峰

学过CSS的人都知道,它不是一种编程语言。

你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。

图片 1

很自然地,有人就开始为CSS加入编程元素,这被叫做”CSS预处理器“(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。

各种”CSS预处理器”之中,我自己最喜欢SASS,觉得它有很多优点,打算以后都用它来写CSS。下面是我整理的用法总结,供自己开发时参考,相信对其他人也有用。

图片 2

一、什么是SASS

SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了。

二、安装和使用

2.1 安装

SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。

假定你已经安装好了Ruby,接着在命令行输入下面的命令:

JavaScript

  gem install sass

1
  gem install sass

然后,就可以使用了。

2.2 使用

SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。

下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。)

JavaScript

  sass test.scss

1
  sass test.scss

如果要将显示结果保存成文件,后面再跟一个.css文件名。

JavaScript

  sass test.scss test.css

1
  sass test.scss test.css

SASS提供四个编译风格的选项:

* nested:嵌套缩进的css代码,它是默认值。

* expanded:没有缩进的、扩展的css代码。

* compact:简洁格式的css代码。

* compressed:压缩后的css代码。

生产环境当中,一般使用最后一个选项。

JavaScript

sass --style compressed test.sass test.css

1
sass --style compressed test.sass test.css

SASS的官方网站,提供了一个在线转换器。你可以在那里,试运行下面的各种例子。

三、基本用法

3.1 变量
SASS允许使用变量,所有变量以$开头。

JavaScript

$blue : #1875e7; div { color : $blue; }

1
2
3
4
$blue : #1875e7;
div {
color : $blue;
}

如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

JavaScript

$side : left; .rounded { border-#{$side}-radius: 5px; }

1
2
3
4
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}

3.2 计算功能

SASS允许在代码中使用算式:

JavaScript

body { margin: (14px/2); top: 50px + 100px; right: $var * 10%; }

1
2
3
4
5
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}

3.3 嵌套

SASS允许选择器嵌套。比如,下面的CSS代码:

CSS

div h1 { color : red; }

1
2
3
div h1 {
color : red;
}

可以写成:

CSS

div { hi { color:red; } }

1
2
3
4
5
div {
hi {
color:red;
}
}

属性也可以嵌套:

CSS

p { border-color: red; }

1
2
3
p {
border-color: red;
}

可以写成:

CSS

p { border: { color: red; } }

1
2
3
4
5
p {
border: {
color: red;
}
}

注意,border后面必须加上冒号。

3.4 注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ,会保留到编译后的文件。

单行注释 // comment,只保留在SASS源文件中,编译后被省略。

四、代码的重用

4.1 继承

SASS允许一个选择器,继承另一个选择器。比如,现有class1:

CSS

.class1 { border: 1px solid #ddd; }

1
2
3
.class1 {
border: 1px solid #ddd;
}

class2要继承class1,就要使用@extend命令:

CSS

.class2 { @extend .class1; font-size:120%; }

1
2
3
4
.class2 {
@extend .class1;
font-size:120%;
}

4.2 Mixin

Mixin有点像C语言的宏(macro),是可以重用的代码块。

使用@mixin命令,定义一个代码块。

CSS

@mixin left { float: left; margin-left: 10px; }

1
2
3
4
@mixin left {
float: left;
margin-left: 10px;
}

使用@include命令,调用这个mixin。

CSS

div { @include left; }

1
2
3
div {
@include left;
}

mixin的强大之处,在于可以指定参数和缺省值。

CSS

@mixin left($value: 10px) { float: left; margin-right: $value; }

1
2
3
4
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}

使用的时候,根据需要加入参数:

CSS

div { @include left(20px); }

1
2
3
div {
@include left(20px);
}

4.3 颜色函数
SASS提供了一些内置的颜色函数,以便生成系列颜色。

CSS

lighten(#cc3, 10%) // #d6d65c darken(#cc3, 10%) // #a3a329 grayscale(#cc3) // #808080 complement(#cc3) // #33c

1
2
3
4
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

4.4 插入文件

@import命令,用来插入外部文件。

CSS

@import("path/filename.scss");

1
@import("path/filename.scss");

如果插入的是.css文件,则等同于css的import命令。

CSS

@import "foo.css";

1
@import "foo.css";

五、高级用法

5.1 条件语句

@if可以用来判断:

JavaScript

p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; }   } 配套的还有@else命令:   @if lightness($color) > 30% { background-color: #000; } @else { background-color: #fff; }

1
2
3
4
5
6
7
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 &lt; 3 { border: 2px dotted; }   } 配套的还有@else命令:   @if lightness($color) &gt; 30% {
background-color: #000;
} @else {
background-color: #fff;
}

5.2 循环语句

SASS支持for循环:

JavaScript

@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } }

1
2
3
4
5
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}

也支持while循环:

JavaScript

$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }

1
2
3
4
5
$i: 6;
@while $i &gt; 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}

each命令,作用与for类似:

JavaScript

@each $member in a, b, c, d { .#{$member} { background-image: url("/image/#{$member}.jpg"); } }

1
2
3
4
5
@each $member in a, b, c, d {
.#{$member} {
background-image: url(&quot;/image/#{$member}.jpg&quot;);
}
}

5.3 自定义函数

SASS允许用户编写自己的函数。

JavaScript

@function double($n) { @return $n * 2; } #sidebar { width: double(5px); }

1
2
3
4
5
6
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}

(完)

赞 2 收藏 评论

图片 3

对照表

“完全居中”并不是本篇文章中唯一的选项。要做到垂直居中,还存在着其他方法,各有各的长处。采取什么样的方法,取决于你所支持的浏览器,以及现有标签的结构。下面这张对照表能够帮你选出最符合你需要的方法。

所用样式

支持的浏览器

是否 响应式

内容溢出后的样式

resize:both

高度可变

主要缺陷

Absolute

现代浏览器&IE8+

会导致容器溢出

是*

‘可变高度’的特性不能跨浏览器

负margin值

所有

带滚动条

大小改变后不再居中

不具有响应式特性,margin值必须经过手工计算

Transform

现代浏览器&IE9+

会导致容器溢出

妨碍渲染

Table-Cell

现代浏览器&IE8+

撑开容器

会加上多余的标记

Inline-Block

现代浏览器&IE8+&IE7*

撑开容器

需要使用容器包裹和hack式的样式

Flexbox

现代浏览器&IE10+

会导致容器溢出

需要使用容器包裹和厂商前缀(vendor prefix)

一、想死你们了

几个星期没有写文章了,好忙好痒;个把月没有写长篇了,好忙好想;半个季度没在文章中唠嗑了,好痒好想。

图片 4

后面一栋楼有对夫妻在吵架,声音雄浑有力,交锋酣畅淋漓,还以为只有小乡镇才有这架势,哦,突然想起来,我就是住在上海郊外的小乡镇上。

刚刚买了几十股京东的股票,第一次玩这个,看好京东的发展。其实股价21的时候就打算入手了,但是,转外汇的时候,提示,要工作时间。然后一忙二忘,等现在入的时候,已经涨了20%多了,科科,肥皂弄人啊!写到这里的时候,忍不住拿出手机一看,哎呦,不错哦,盈利28刀,孩子的半罐奶粉钱有了,哈哈!图片 5

说起肥皂,让我想起了《监狱学院》,科科~

图片 6

原来,肥皂和基友的传说已经传播到了11区。岂止啊,除了2次元,代码次元也深受其爱,比方说CSS届的vertical-alignline-height就是典型的表面上看上去大相径庭,实际上是大进后庭的断背好基友啊!

图片 7

没错,就是这么狗血!

乡下人不打诳语,下面我就好好跟大家八卦下,vertical-alignline-height之间令人发指的基友关系!

图片 8

说明

在研究了规范和文档后,我总结出了“完全居中”的工作原理:

  1. 在普通文档流里,margin: auto; 的意思是设置元素的margin-top和margin-bottom为0。

W3.org:?If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.

  1. 设置了position: absolute; 的元素会变成块元素,并脱离普通文档流。而文档的其余部分照常渲染,元素像是不在原来的位置一样。 Developer.mozilla.org:?…an element that is positioned absolutely is taken out of the flow and thus takes up no space

  2. 设置了top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子,因此这个元素会填满它相对父元素的内部空间,这个相对父元素可以是是body标签,或者是一个设置了position: relative; 样式的容器。 Developer.mozilla.org:?For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).

  3. 给元素设置了宽高以后,浏览器会阻止元素填满所有的空间,根据margin: auto; 的要求,重新计算,并包裹一层新的盒子。 Developer.mozilla.org:?The margin of the [absolutely positioned] element is then positioned inside these offsets.

5. 既然块元素是绝对定位的,又脱离了普通文档流,因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。 W3.org:?If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.?AKA: center the block vertically

使用“完全居中”,有意遵照了标准margin: auto; 样式渲染的规定,所以应当在与标准兼容的各种浏览器中起作用。

 

二、表现明显的断背基情

众所周知,vertical-align支持很多属性值,足足可以组成一个足球队了:

CSS

/* 关键字值 */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* <长度> 值 */ vertical-align: 10em; vertical-align: 4px; /* <百分比> 值 */ vertical-align: 10%; /* 全局值 */ vertical-align: inherit; vertical-align: initial; vertical-align: unset;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 关键字值 */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
 
/* <长度> 值 */
vertical-align: 10em;
vertical-align: 4px;
 
/* <百分比> 值 */
vertical-align: 10%;
 
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

其中,有个属性值暴露了vertical-alignline-height之间的基友关系,大家猜猜看是哪个属性值?

图片 9

哇塞,好厉害!居然被大家一眼就看出来了,没错,就是“百分比值”。

vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的,而是相对于line-height计算的。举个简单的例子,如下CSS代码:

CSS

{ line-height: 30px; vertical-align: -10%; }

1
2
3
4
{
  line-height: 30px;
  vertical-align: -10%;
}

实际上,等同于:

CSS

{ line-height: 30px; vertical-align: -3px; /* = 30px * -10% */ }

1
2
3
4
{
  line-height: 30px;
  vertical-align: -3px;    /* = 30px * -10% */  
}

CSS属性何其多,偏偏跟line-height有一腿,这不是有基情那是什么?

//zxx: IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height

对齐

三、背地里无处不在的基友关系

//zxx: 注意vertical-alignline-height的地下基友关系从HTML5文档声明开始的,因此,以下探讨的现象,都是在页面为HTML5声明前提下,类似下面的doctype:

XHTML

<!doctype html> <html>

1
2
<!doctype html>
<html>

另外,下面很多效果直接就是真实演示,因此,请使用现代浏览器观摩下面的内容。如果发现某些行为与描述不匹配,且浏览器正常,那可能是因为你访问的并不是原出处。

① 基本现象

要八卦vertical-alignline-height之间的关系,我们不妨从一个极其简单的现象入手。假设,我们有一个<div>标签,然后,里面有一张<img>图片,我们的HTML代码就是这样子:

XHTML

<div><img src="mm1.jpg"></div>

1
<div><img src="mm1.jpg"></div>

图片 10

恩,看上去很正常,一切都是理所当然。然而,如果我们给这个<div>元素增加一个背景色,例如淡蓝色:

XHTML

<div style="background-color:#e5edff;"><img src="mm1.jpg"></div>

1
<div style="background-color:#e5edff;"><img src="mm1.jpg"></div>

则会是下面这样:

图片 11

会发现图片下面有一段空白空间:图片 12

想必大家都遇到过类似问题,不知大家有没有思考过,为什么图片下面有留有一段间隙呢?图片 13

实际上,这段空白间隙就是vertical-alignline-height携手搞的鬼!

首先,大家一定要意识到这么一点:对于内联元素,vertical-align与line-height虽然看不见,但实际上「到处都是」!

图片 14

因此,对于内联元素各种想得通或者想不通的行为表现,基本上都可以用vertical-alignline-height来解释,以及进行行为矫正,然而,要深入理解这些行为表现,还是需要狠花一番功夫的,因此,下面的内容,请确保你有半小时充足时间细细阅读,别的地方可是看不到的。图片 15

② 幽灵空白节点

「幽灵空白节点」这个概念我自己命名的,注意,是我个人YY出来的,是我自己便于理解某些行为特征提出的概念。规范可能有类似的概念,但名称并非这个。 W3C规范虽然有很多行为的解释和说明,但是,毕竟官方的东西,要求严谨正式,但是,也会有太干太涩的感觉。如果快速掌握和理解这些行为表现呢?就我个人而言,从两方面入手:1.情感化认知2. 具象化思维

例如,我称vertical-alignline-height为好基友(包括以前称浮动和绝对定位是兄弟),就是“情感化认知”;而这里的「幽灵空白节点」就是“具象化思维”。

那「幽灵空白节点」是个什么意思呢?

在HTML5文档声明下,块状元素内部的内联元素的行为表现,就好像块状元素内部还有一个(更有可能两个-前后)看不见摸不着没有宽度没有实体的空白节点,这个假想又似乎存在的空白节点,我称之为“幽灵空白节点”。 //zxx: 自己捣腾的概念,不是权威,欢迎其他小伙伴反馈权威解释

抽象了这个概念,绝对定位与text-align的一些行为表现,以及这里的行为表现,就好理解了。

还是上面的图片下边缘留空隙的例子,实际上,这种行为表现,就跟图片前面或者后面有一个宽度为0的空格元素表现是一致的。但是,空格是透明的,为了便于大家理解,我就直接使用很明显的匿名inline box, 也就是字符代替。如下,大家会发现,图片下面的间隙,依旧是那个间隙。

图片 16

下面要解释这个间隙就好解释了。下面,我们让新增的文本inline-block化,然后弄个白色背景,显示其占据的高度。

图片 17

会发现,图片下面的间隙,依旧是那个间隙。但是,我们的理解就好理解了。回答下面几个问题,我们就知道表现的原因了:

  1. vertical-align默认的对齐方式是?
  2. 后面zxx文字的高度从何而来?
  1. vertical-align默认值是baseline, 也就是基线对齐。而基线是什么,基线就是字母X的下边缘(参见“字母’x’在CSS世界中的角色和故事”一文)。所以,妹子图片的下边缘就和后面zxx中的字母x下边缘对齐(见下图)。而字符zxx本身是有高度的,对吧,于是,图片下面就留空了。
    图片 18
  2. zxx文字的高度是由行高决定的。

因此,简单的图片下面留白行为表现,本质上,就是vertical-alignline-height背地里搞基造成的。

知道了问题的原因,我们就可以对症下药,准确搞定图片下面我们不希望看到的间隙。怎么搞呢?一对基友,vertical-alignline-height我们随便搞定一个就可以了。

比方说vertical-align.

1. 让vertical-align失效
图片默认是inline水平的,而vertical-align对块状水平的元素无感。因此,我们只要让图片display水平为block就可以了,我们可以直接设置display或者浮动、绝对定位等(如果布局允许)。例如:

CSS

img { display: block; }

1
img { display: block; }

则妹子就会变这样:图片 19

下面的空隙不见了。

2. 使用其他vertical-align值
告别baseline, 取用其他属性值,比方说bottom/middle/top都是可以的。

图片 20

3. 直接修改line-height值
下面的空隙高度,实际上是文字计算后的行高值和字母x下边缘的距离。因此,只要行高足够小,实际文字占据的高度的底部就会在x的上面,下面没有了高度区域支撑,自然,图片就会有容器底边贴合在一起了。比方说,我们设置行高5像素:

XHTML

div { line-height: 5px; }

1
div { line-height: 5px; }

图片 21

4. line-height为相对单位,font-size间接控制
如果line-height是相对单位,例如line-height:1.6或者line-height:160%之类,也可以使用font-size间接控制,比方说来个狠的,font-size设为大鸡蛋0, 本质上还是改变line-height值.

XHTML

div { font-size: 0; }

1
div { font-size: 0; }

图片 22

③ 基本现象衍生:垂直居中

由于「幽灵空白节点」的存在,因此,我们可以进一步衍生,实现其他更实用的效果,比方说任意尺寸的图片(或者内联块状化的多行文字)的垂直居中效果。就是借助本文的两位男主角,vertical-alignline-height

你想啊,图片后面(前面)有个类似空格字符的节点,然后就能响应line-height形成高度,此时,图片再来个vertical-align:middle,当当当当,就可以和这个被行高撑高的「幽灵空白节点」(近似)垂直对齐了。

例如:

XHTML

div { line-height: 240px; } img { vertical-align: middle; }

1
2
div { line-height: 240px; }
img { vertical-align: middle; }

然后就会这样子:图片 23

不过上面的效果并不是完全的垂直居中,只是近似(稍微仔细看可以看出来)。为什么只是近似呢?那是因为「幽灵空白节点」高度行高撑开,其垂直中心是字符content area的中心,而对于字符x而言,都是比绝对中心位置要下沉的(不同字体下沉幅度不一样),换句更易懂的描述就是x的中心位置都是在字符内容区域高度中心点的下方,而这上下的偏差就是这里图片上下间距的偏差。

我特意把字符x使用大字号演示了下:

图片 24

换句更简单的话说就是:middle中线位置(字符x的中心)并不是字符内容的绝对居中位置。两个位置的偏差就是图片近似居中的偏差。

嘛嘛,单纯的文字还是太苍白了,截个图示意下吧:

图片 25

因此,要想完全垂直居中,最先想到的方法就是让后面的“幽灵字符”也是vertical-align:middle,然而,呵呵,既然称之为“幽灵”就表示不会受非继承特性的属性影响,所以,根本没法设置vertical-align:middle,除非你自己创建一个显示的内联元素。

我们就没有办法了吗?当然不是,“幽灵字符”可以受具有继承特性的CSS属性影响,于是,我们可以通过其他东西来做调整,让字符的中线和字符内容中心线在一起,或者说在一个位置上就可以了。有人可能要疑问了,这能行吗?啊,是可以的。

怎么搞?很简单,font-size:0, 因此此时content area高度是0,各种乱七八糟的线都在高度为0的这条线上,绝对中心线和中线重合。自然全垂直居中:

CSS

div { line-height: 240px; font-size: 0; } img { vertical-align: middle; }

1
2
div { line-height: 240px; font-size: 0; }
img { vertical-align: middle; }

结果是:图片 26

处女座的你,是不是看过去舒服多啦!?图片 27

这种通过line-height定高,元素vertical-align:middle垂直居中的方法不仅适用于现代浏览器,连IE7浏览器也是支持的:图片 28

不过和其他浏览器再使用上还是有些需要注意的地方,就是,HTML不能这样:

XHTML

<del><div><img src="mm1.jpg"></div></del>

1
<del><div><img src="mm1.jpg"></div></del>

而是需要在图片标签结束处留下空格后者换行:

XHTML

<div><img src="mm1.jpg"><!-- 这里要折行或空格 --> </div>

1
2
<div><img src="mm1.jpg"><!-- 这里要折行或空格 -->
</div>

④ 复杂现象
多年前曾分享过“text-align:justify下列表的两端对齐布局”的技术,其中,为了让任意个数的列表最后一行也是对齐排列,在列表最后会辅助列表等宽的空标签元素来占位,类似下面红色高亮HTML代码:

CSS

.justify-fix { display: inline-block; width: 128px; }

1
.justify-fix { display: inline-block; width: 128px; }

XHTML

<div style="text-align: justify;"> <img src="img/mm1.jpg" width="128"> <img src="img/mm1.jpg" width="128"> <img src="img/mm1.jpg" width="128"> <img src="img/mm1.jpg" width="128"> <i class="justify-fix"></i> <i class="justify-fix"></i> <i class="justify-fix"></i> </div>

1
2
3
4
5
6
7
8
9
<div style="text-align: justify;">
    <img src="img/mm1.jpg" width="128">
    <img src="img/mm1.jpg" width="128">
    <img src="img/mm1.jpg" width="128">
    <img src="img/mm1.jpg" width="128">
    <i class="justify-fix"></i>
    <i class="justify-fix"></i>
    <i class="justify-fix"></i>
</div>

为了节约空间,我就使用小图示意:

图片 29

同样的,在白色背景下,似乎看上去效果还不赖,但是,如果给div容器加个背景色~~图片 30

会惊讶的发现,下面多了很大一块间隙(如下截图):图片 31

为了便于大家看其究竟,我把占位i元素outline高亮下,于是,效果如下:图片 32

结果会发现,上面巨大的空隙是由占位i元素上面和下面的间隙共同组成的。

下面问题来了:上面的间隙是如何产生的?下面的间隙是如何产生的?如果去除这些间隙呢?

很多时候,复杂问题是由简单问题组合而成的,实际上,这里的间隙现象的始作俑者和上面的简单现象一样,都是vertical-alignline-height搞基带来的不好的影响。

按照之前问题解决方法,我们可以直接来个line-height:0解决垂直间隙问题:

CSS

div { line-height: 0; }

1
div { line-height: 0; }

结果图片和图片之间的间隙是没有了,但是,图片和最后的占位元素之间依然有个几像素的间距,图片 33,啊啊啊啊,这究竟是什么鬼?图片 34

简单现象的背后往往有大的学问,接下来是本文的高潮了,究其原因,要说到inline-block元素和基线baseline之间的一些纠缠的关系。

⑤ inline-block和baseline
CSS2的可视化格式模型文档中有一么一段话:

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

英文看得眼睛大,于是我中文直译了下:

‘inline-block’的基线是正常流中最后一个line box的基线, 除非,这个line box里面既没有line boxes或者本身’overflow’属性的计算值而不是’visible’, 这种情况下基线是margin底边缘。

这段文档中出现了很多专有名词line boxline boxes等,这些是内联盒子模型中的概念,是CSS进阶必备知识。我在“浮动深入理解(一)”一文的中间穿插介绍了该模型。//zxx: 我现在后悔了,内联盒子模型当初应该直接独立成一篇文章,这样其他文章可以很干净地引用,所谓文章的模块化书写

如果大家没有足够精力去学习之,可以先看下面这张图:

图片 35

由于上面的译文是直译的,理解起来还是有些拗口,我使用通俗的话描述就是:一个inline-block元素,如果里面没有inline内联元素,或者overflow不是visible,则该元素的基线就是其margin底边缘,否则,其基线就是元素里面最后一行内联元素的基线。

纳尼,还是没反应过来?

那我们看下面这个例子,应该就知道什么意思了。

两个同尺寸的inline-block水平元素,唯一区别就是一个空的,一个里面有字符,代码如下:

CSS

.dib-baseline { display: inline-block; width: 150px; height: 150px; border: 1px solid #cad5eb; background-color: #f0f3f9; }

1
2
3
4
.dib-baseline {
  display: inline-block; width: 150px; height: 150px;
  border: 1px solid #cad5eb; background-color: #f0f3f9;
}

XHTML

<span class="dib-baseline"></span> <span class="dib-baseline">x-baseline</span>

1
2
<span class="dib-baseline"></span>
<span class="dib-baseline">x-baseline</span>

结果,科科:图片 36

会发现,明明尺寸、display水平都是一样的,结果呢,两个却不在一个水平线上对齐,为什么呢?哈哈,上面的规范已经说明了一切。第一个框框里面没有内联元素,因此,基线就是容器的margin下边缘,也就是下边框下面的位置;而第二个框框里面有字符,纯正的内联元素,因此,第二个框框就是这些字符的基线,也就是字母x的下边缘了。于是,我们就看到了框框1下边缘和框框2里面字符x底边对齐的好戏。框框2有个小彩蛋,点击可以toggle其innerHTML,会发现,如果框框2里面没文字,就和框框1举案齐眉了。图片 37

下面我们要做一件很有必要的事情,用来帮助我们理解上面复杂例子在line-height值为0后的表现,什么事情呢?哈,同境界模拟,我们也设置框框2的line-height值为0,于是,就会是下面这样的表现:图片 38

知道框框2为何又下沉了一点吗?

因为字符实际占据的高度是由行高决定的,当行高变成0的时候,字符占据的高度也是0,此时,高度的起始位置就变成了字符content area的垂直中心位置,于是,文字就一半落在看看2的外面了。图片 39

由于文字字符上移了,自然基线位置(字母x的底边缘)也往上移动了,于是,两个框框的垂直落差就更大了。

OK,明白了上面的简单例子,也就能明白上面的复杂例子。紧接着,如果我们在最后一个占位的<i>元素后面新增同样的x-baseline字符,则:图片 40

大家是不是就可以明白原因所在啦!

额~居然还有小伙伴皱眉头,那我再用文字解释下:
现在行高line-height0, 则最后的x-baseline的垂直中线就和上面一列的图片对齐,而基线呢,就在中线下面差不多半个x的高度地方,而这个高度落差就是最后图片和容器的间隙高度值,因为前面的<i>是个空元素,基线是自身的底部,哈哈,造业啊!图片 41

OK,一旦知道了现象的本质,我们就能轻松对症下药了!要么改造占位<i>元素的基线、要么改造“幽灵空白节点”的基线位置、要么使用其他vertical-align对齐方式~

首先,来个最有意思的方法,对吧,改造占位<i>元素的基线。这个很简单,对吧,只要在空的<i>元素里面随便放几个字符就可以了,例如,里面有个x图片 42

会发现,间隙没有了!图片 43 为什么呢?哈哈,因为<i>元素的基线和“幽灵空白节点”的基线位置现在一致了,没有了错位,自然就不会有间隙啦!

改造“幽灵空白节点”的基线位置,哈哈,使用font-size,字体足够小时,基线和中线会重合在一起,什么时候字体足够小呢,就是0. 于是,CSS代码(line-height如果是相对值,line-height:0也可以省掉):

CSS

div { font-size: 0; }

1
div { font-size: 0; }

图片 44

使用其他vertical-align对齐方式,就是让两端对齐的列表元素vertical-align:top/bottom/...之类。

CSS

div { line-height: 0; } .justify-fix { display: inline-block; width: 128px; vertical-align: top; }

1
2
div { line-height: 0; }
.justify-fix { display: inline-block; width: 128px; vertical-align: top; }

最后的效果是:图片 45

恩恩,各种方法都完美解决了垂直间隙的问题,来,各个大大的赞!

容器内对齐

使用“完全居中”,就可以在一个设置了position: relative的容器中做到完全居中元素了! (居中例子,请前往英文原文查看)

CSS

.Center-Container { position: relative; } .Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
.Center-Container {
  position: relative;
}
 
.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

图片 46

接下来的示例会假设已经包含了以下样式,并且以逐步添加样式的方式提供不同的特性。

 

四、基友关系暴露之后

图片 47

至此,vertical-alignline-height的断背基友关系算是彻底暴露了,而且,从行为表现上来看,line-height是攻,vertical-align是个受。而很多内联元素的行为表现,就是这对基友搞七搞八一起搞出来的。

以前,关系处于地下的时候,我们可能不会明白,为何男厕所的卷纸用得比女厕所还快;但是,现在关系暴露了,很多以前我们想不明白的事情一下子就豁然开朗了。

因此,我们要以正确地心态去看待这对好基友,毕竟,他们可以CSS届非常重要的两个主力大将。

本文牵扯的知识点甚多,建议大家如果想在重构领域有所造诣,很多基本的却很深入的东西是很有必要弄透的。篇幅有限,有不少知识点都是一笔带过的,大家若有疑问,可以自己去检索与研究,例如,vertical-align各个值的规范解释,内联盒子模型,等等。也欢迎各种方式交流。

文章都是周末熬夜写的,你知道的,现在不是当年,眼皮像灌了水银,因此,文章有表述或书写错误的地方在所难免,欢迎指正!

感谢阅读,周末愉快!另外祝贺中国队400米接力获得银牌。

1 赞 2 收藏 1 评论

图片 48

在可视区域内居中

想要使内容区在可视区域内居中么?设置position: fixed样式,并设置一个较高的z-index值,就可以做到。

CSS

.Absolute-Center.is-Fixed { position: fixed; z-index: 999; }

1
2
3
4
.Absolute-Center.is-Fixed {
  position: fixed;
  z-index: 999;
}

图片 49

移动版Safari的说明:如果外面没有一层设置position: relative的容器,内容区会以整个文档的高度的中心点为基准居中,而不是以可视区域的高度中心点为基准居中。

 

偏移值

如果需要添加固定的标题,或者其他带偏移样式的元素,可以直接把类似top: 70px; 的样式写进内容区域的样式中。一旦声明了margin: auto; 的样式,内容块的top ``left ``bottom ``right的属性值也会同时计算进去。

如果想让内容块在贴近侧边的过程中保持水平居中,可以使用right: 0; left: auto; 让内容贴在右侧,或者使用left: 0; right: auto; 使内容贴在左侧。

CSS

.Absolute-Center.is-Fixed { position: fixed; z-index: 999; }

1
2
3
4
.Absolute-Center.is-Fixed {
  position: fixed;
  z-index: 999;
}

图片 50

 

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:的基友关系,如何只用CSS做到完全居中

上一篇:你需要知道的三个,CSS基线之道 下一篇:响应式设计的5个CSS实用技巧,SO热门问答
猜你喜欢
热门排行
精彩图文