Top

css中vertical-align垂直居中的认识

目标大纲

1.vertical-align为何不起作用？？

vertical-align只钟情于“inline-block内联块级元素/inline元素”

vertical-align属性 text-bottom是与父标签的文字底部对齐

效果 

栗子：

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>Document</title>
   <style>
	.box {
	    background-color: #000;
	    color:#fff;
	    padding-left: 25px;
	}
	.dot {
	     display: inline-block;
	     width: 4px;
	     height: 4px;
	     background-color: orangered;
	     vertical-align: text-bottom;/*是与父标签的文字底部对齐*/
	}
   </style>
</head>
<body>
	<div class="box">
		<span class="dot"></span>我是一段文本.....
	</div>
</body>
</html>

2.如何消除图片下面的间隙是如何出现的？？

源代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vertical-align</title>
 6         <style>
 7              * {
 8                  margin: 0;
 9                  padding: 0;
10              }
11             .box {
12                 background-color: deeppink;
13                 color: #fff;
14                 padding-left: 10px;
15                 line-height: 65px;
16             }
17             .inner-box {
18                 display: inline-block;
19                 width: 4px;
20                 height: 4px;
21                 background-color: black;
22                 vertical-align: text-bottom; /*与父容器标签底部对齐*/
23             }
24             
25             .box_1 {
26                 background-color: royalblue;
27                 margin-top: 5px;
28                 color: #fff;
29                 padding-left: 10px;
30             }
31             .box_1 img {
32                 width: 65px;
33             }
34             .box_1 span {
35                 background-color: red;
36             }
37         </style>
38     </head>
39     <body>
40         <div class="box">
41             <span class="inner-box"></span>
42             这是一段文本内容_vertical-align......
43         </div>
44         <div class="box_1">
45             <img src="img/photo.jpg" /><span>这是一段文本内容_vertical-align......</span>
46         </div>
47     </body>
48 </html>
View Code

默认情况下图片vertical-align与一段文本的基线baseline对齐，由于文本存在line-height高度，所以就会出现间隙

3.如何消除图片下面的空白间隙？？

a.设置vertical-align值，vertical-align: top/middle/bottom;

img {  vertical-align: top;  }

b.让vertical-align失效，vertical-align 只对“inline-block内联块级元素”有效，我们只设置图片display:block就可以搞定

img { display: block;}

c.设置line-height行高足够小

div.box_1 { line-height: 5px;}

d.通过line-height间接控制，font-size字体足够小

div.box_1 { font-size: 0; /*字体足够小*/}

消除图片下面空白间隙的几种方法源码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>消除图片下面空白间隙的几种方法（原因vertical-align与line-height导致）</title>
 6         <style>        
 7             .box_1 {
 8                 background-color: royalblue;
 9                 margin-top: 5px;
10                 color: #fff;
11                 padding-left: 10px;
12                 font-size: 0;/*字体足够小*/
13                 /* line-height: 5px;*/
14             }
15             .box_1 img {
16                 /*vertical-align: top;文字与父标签的顶部对齐*/
17                 /*vertical-align: middle;*/
18                 /*display: block;*/
19             }
20             .box_1 span {
21                 background-color: red;
22             }
23         </style>
24     </head>
25     <body>
26         <div class="box_1">
27             <img src="img/photo.jpg"  width="65"/>
28             <span>这是一段文本内容_vertical-align......</span>
29         </div>
30     </body>
31 </html>
View Code

【资料参考】

  http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

  http://www.zhangxinxu.com/wordpress/2010/05/我对css-vertical-align的一些理解与认识（一）/

 

posted @ 2016-10-30 22:17  Avenstar  阅读(288)  评论(0)  编辑  收藏  举报