您的位置：首页 > 其它

inline-block基线对布局的影响&vertical-align&vertical-align等应用

2016-10-29 13:43 489 查看

在上一篇博客 http://blog.csdn.net/wmaoshu/article/details/52961394

中介绍了

line-height

，探讨了行框模型以及行替代元素的空白节点问题。在这一篇中多次强调了在行框中字母“x”的一半并不是内容区域的一半，这是由“文字下沉”导致的。在将要介绍的这一篇中介绍line-height一个好基友是vertical-align，他俩可以说无论在哪，都几乎如影随形，他俩配合可以完成一些一些意想不到的效果。

inline-block的基线问题。

先来看几个表现：

由此可以看出对于inline-block元素来说，他的基线取决于元素本身的特性，在该元素中没有行内子元素（注意是DOM树的子元素，有块子元素不算或者块子元素中有行元素这个行元素算）的时候或者overflow不为visible，该inline-block的基线为margin-bottom的下边界。否则，以该元素中最后一个行框子元素的基线为该元素的基线。

vertical-align

先来介绍下基本规范：


特性	值
值	baseline、middle、bottom、top、sub、sup、inherit等
初始值	baseline
应用于	行内元素或者表单元格
继承性	无

注意，没有继承性。行内元素包含inline-block比如input……要注意基线的问题，还包括inline元素比如span，strong，i，em，未知的元素……

（1）以百分数为单位：以该元素inline-height的百分数为值，相对基线上移或者下移。（基线在一个行框中是固定了的不存在某个行内框有自己的基线）。在IE7下vertical-align百分数不支持line-height为小数的情况。

（2）以长度为值：行元素上移动或者下移动。无论是以百分数或者长度为单位，上移动或者下移动都会影响到行框或者行内框的高度。

（3）Bottom：元素行内框底部与行框底部对齐。

（4）Top：元素行内框顶部与行框顶部对齐。

（5）Middle：行内元素的中点和基线上方1/2x-height处对其。由于X的中点（即基线上方1/2x-height）并不是内容区域的中心，所以行内元素并不是严格上的垂直居中对齐。如下解析：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
line-height: 200px;
border: 2px solid;
}
img {
width: 200px;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="images/image.jpg" alt="">X
</div>
</body>
</html>

经过ps测量从x中心到上方是101px，而到下方是99px，上方比下方多出2px，并且图片的中心与x的中点对齐，所以说图片上方的空白区域会比下方多出2px。所以图片并不是严格的垂直居中对齐。（其实不只是图片，包括所有的行内元素即使是单行文本用line-height也不是单纯的垂直居中的，原因就是x文字有下沉效果）。

解决方案一：如果单纯又行替换元素的话或者行内块元素的话，可以将包含块的font-size设置为0，这样就可以垂直居中了。这是一种直接的办法，有局限性。

解决方案二：在行内块元素后面加一个span或者其他的行内空元素，然后将这两个行内元素都middle。这个方式是一种相对的办法，就是说将包含块内部的文字也居中，那么图片就和文字的中点对齐，同时从中点到两边的距离都相等。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
line-height: 200px;
border: 2px solid;
font-size: 20px;
}
img {
width: 200px;
vertical-align: middle;
}
span {
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="images/image.jpg" alt="">
<span>X</span>
</div>
</body>
</html>

一个应用：实现不定行文字和不定尺寸图片的水平居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border: 2px solid;
text-align: center;
}
img {
width: 200px;
vertical-align: middle;
}
p {
margin: 0;
display: inline-block;
vertical-align: middle;
border: 1px solid;
}
span {
vertical-align: middle;
/*这一步是关键*/
/*或者font-size: 0;也是额可以解决的*/
line-height: 400px;
/*可以这么说，这个line-height: 400px;就是确定这个包含快的高度的*/
}
</style>
</head>
<body>
<div>

<p>文字文字文字文字文字<br>文字文字</p>
<img src="images/image.jpg" alt="">
<span></span>
<!--运用第二条解决方案，目的就是让上面两个行内快元素垂直居中-->
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： inlineblo vertical-a

相关文章推荐

新的分享

章节导航