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

目标大纲

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

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

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

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

栗子：

<!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.如何消除图片下面的间隙是如何出现的？？

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

源代码

 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