如何实现div内的span垂直的定位?

如果为的是居中显示，就采用楼上写的，将高度 和 行高 设置一样，即如：
height:30px;
line-height:30px;
若只想距离顶部留点空位，在给 div 设置padding-top; 具体设置了多少，相应 div 的高度就要减多少。不知你试了楼上这个的方法时，是否有注意到这个

方法1：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

parent {

width:800px;

height:500px;

border:2px solid #000;

position:relative;

}

child {

width:200px;

height:200px;

margin: auto;

position: absolute;

top: 0; left: 0; bottom: 0; right: 0;

background-color: red;

}

方法2：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

parent {

width:800px;

height:500px;

border:2px solid #000;

display:table-cell;

vertical-align:middle;

text-align: center;

}

child {

width:200px;

height:200px;

display:inline-block;

background-color: red;

}

方法3：

1

2

3

4

5

6

7

8

9

10

11

12

13

parent {

width:800px;

height:500px;

border:2px solid #000;

display:flex;

justify-content:center;

align-items:center;

}

child {

width:200px;

height:200px;

background-color: red;

}

方法4：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

parent {

width:800px;

height:500px;

border:2px solid #000;

position:relative;

}

child {

width:300px;

height:200px;

margin:auto;

position:absolute;/设定水平和垂直偏移父元素的50%，

再根据实际长度将子元素上左挪回一半大小/

left:50%;

top:50%;

margin-left: -150px;

margin-top:-100px;

background-color: red;

}

span 是行内元素 设置margin和padding 要先设置为块元素

time-item span, time-item strong {display: inline-block; display: inline; zoom:1; padding: 10px 15px;}

span元素内是不应该嵌套span元素的，这是错误的写法，请使用div等块级元素嵌套实际上你要是把这三个span换成div的话，至少文字方面的排版问题就解决了，位置问题可以用margin和float来调整。

1、请注意：#test {vertical-align:middle;}s#test 表示了div里面所有元素,当然包含了span,input,img这些内联元素了vertical-align初始值baseline缺省值。

2、可否继承否适用于内联元素说明vertical-align:baseline使元素的基线同父元素的基线对齐vertical-align不能影响表格单元中的内容的对齐，对于块元素中的内容也一样。

3、请注意,vertical-align只影响内联元素,比如span,img,em,input,a等这些元素,而对div,h3,p等这些块元素是无效的。

由于div
是块级元素，在css中并没有可以使块级元素内的元素垂直居中的属性。所以只能使用其他的方法。
设置文字的padding，使其达到居中的效果。、
在文字外层，div内包裹一个标签，只是一段文字并将p标签的大小设置的与div标签同样大校再对p标

span{display:block;widht:宽度值自己定； text-align:center;}
这里是控制水平居中。
还可以 span{display:block;padding:值 } 这里值 设置为相同的 就可以
如：padding: 0 10px; 水平居中 左右间距为10px
或者 padding:10px 0 ; 上下垂直居中， 上下间距：10px；
亦或者： padding ：10px 上下左右各 10px

---