先~~刷频，哈哈。总得给不看技术问的人一点可以讨论的东西是吧。有谁认识这张图片的？欢迎留言水水。

既然上一篇文章说了以后会发一些前端学习的文章，分享一些经验什么的，那就得搞起来。

声明一下，写这些文章的目的主要是为了做笔记学习进阶前端知识，也为了分享，个人知识有限，如果有错误的地方请留言之处，不胜感激。

作为开头，先来一篇简单点的吧，基本是大家都知道的东西，除了两个比较少用的（就我所知）。如题，下面简单说说怎么让网页上的东西水平对其。

一、左对齐，右对齐

想到左右对其一般我脑袋里出现两种css属性，一种是text-align，另一种是float，大家估计也都知道这俩货，用得太多了。另外，还有一个呆在角落即很久的direction知道不？我猜好多人都没见过吧，能用到的场面太少了，其实人家在css 2里就有了，浏览器支持当然也是杠杠的。嗯，大概就这四个吧。

写成目标驱动的容易读一些。现在前提是我们有一个div，里面还有一张img图片，目标是让里面这个图片以不同的方式左右对其。

1、首先，上text-align。

给外面的div设置text-align: left就可以让图片左对齐，如下图。（注：以下所有例子均可通过查看元素看到源码。）

同样，text-align: right可以让图片向右对齐。

（吐槽，wp的编辑器啊，能不要自动给我把代码删了吗……）

看到这里是不是觉得很简单？都是些废话，刚css入门的人都知道文本居中这个东西。好吧，再说一些吧，不然这篇文章就太简单了。我们去看看text-align的值列表，除了left、center、right和inherit这个继承的值外，还多了一个justify。这是干啥的？

不知道了吧？简单的东西也可以有复杂的内涵。水平对齐其实不止左中右三种情况，想象一个，如果我的div里有很多张图片，我想让他在不管我的div宽度是多少的时候，图片与图片之间都等距排列。也就是说，两张图片的情况就一张在最左一张在最右；三张图片的时候就一张在最左一张在最右还有一张在中间；四张五章类似，两两图片中间的留白相等。

what？css还能干这个？当然，就一句代码的事儿，justify就是干这个的。让我们来试试给div加上text-align: justify看有效果没：

欸？为啥没反应？再看看justify的使用限制，原来人家不会对最后一行元素生效。上面我们就只有三张图片排成一行，当然也就只有一个最后一行了。这么简单的事情当然不能难道我们，既然这样就上最近频频露面的伪元素:after吧。关于:after以后再详细学习吧，这里主要的原理就是在div的最后再插入一行高度为0的元素，那么上面的img自然就可以应用到justify啦。

.justify-test:after {content: ' ';display:inline-block;width:100%;}

就是这么简单，不用js，不用绝对定位，浏览器会自动根据div的大小来调整图片之间的距离。

除了对最后一行元素不生效之外，justify还有另外一个限制，那就是要求元素html结构之间换行或者留空格，如果上面的img挨个写到一起的话也没有任何效果。

（吐槽：鉴于神一样的wp编辑器换行过后会自动加上br，我也就只能把img挨个写到一起然后中间加空格了，好傻的感觉……）

所以总结一下justify的限制：

• 1、最后一行元素不会生效。
• 2、元素之间没有换行或者空格不会生效。
• 3、display: block的元素不会生效。

其实图片用justify这么对其的情况我倒是没注意过，文字这么对其用处就大了，典型的是定宽的菜单刚好可以用到，比如apple中国首页的menu。

2、float

float等于left或者right也可以实现左对齐和右对齐的功能，效果和text-align的一样，需要注意的有两点：

• 1、text-align是写在父元素div上的，float是写在子元素img上的。也就是给img加上float: left或者float: right，img就会想左和向右浮动，也差不多实现了向左或向右对齐的功能。
• 2、float会造成父元素“塌陷”的结果，有时候需要做清除浮动等处理才能不影响其他元素。

3、direction

（唉，写到这里突然一阵心累，写技术文章好麻烦。）

direction这个属性比较不常见，它的原意应该是元素在页面上的排版方向的意思。默认我们页面上的元素是从左往右排列的，也就是direction的默认值ltr的情况，当direction等于rtl的时候，元素将会从页面右边开始排列。好神奇是不是？来看看效果吧。

我们给div设置direction:rtl过后：

和text-align:right一样右对齐了是不是？看起来好像差不多，当多放两张图片的时候区别就来了，比如下面第一种是用text-align:right的效果，第二种是用direction:rtl的效果：

这下区别就形象了吧，html的结构中，数码宝贝第一部的图片在数码宝贝tri的前面。text-align还是按照元素html文档的正常顺序，从左往右排，然后再向右居中对齐；而direction是直接把元素按照html文档的顺序挨个从右边往左排。

那么direction有啥实际的用处？好吧，其实我也还没见到用。如果哪天见到元素的左右顺序与常识相反的，再审查元素看看是不是用这货。

二、左右居中对齐

（吐槽：终于快完了，先去个健身房回来接着写。）

居中对齐就没那么多好说的了。一般我也就常用两种，text-align: center，和margin: auto。当然，其他肯定还有各种方法，不过咱要的是能适应屏幕各种缩放和乱七八糟的内容情况的，写死像素的那些就略过吧。

还是大耳兽的例子，谁让它那么可爱呢啊哈哈~

给外层的div设置text-align: center;就可以让里面的图片居中对齐啦，如下图。

或者给图片加上display: block;margin-left: auto;margin-right: auto;也是一样上面的效果。为啥要加上display:block？因为img默认的display是inline，而用margin等于auto来左右居中只会对block的元素起作用，如下图。

具体怎么加？chrome浏览器->在上面的图片上右键->检查。然后你就可以看到怎么加的了。最好是加到css文件哈，我加到style里面只是为了写文章方便。

---

写在最后，有几点感慨。首先，Always是在不适合长篇大论，排版很乱有木有？我已经尽力了，看来要换个主题用用。其次，自己写东西，和看别人文章真不一样，有时候一个很简单的例子也会出现异常，然后又学到更多。最后，wp的编辑器真是神一样的东西，求推荐，你们都用什么发文章？