这是一个关于HTML的神奇问题
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* {
margin:0px;
}
#kaitou {height:100px;
box-shadow:0 10px 1px gray;
}
</style>
</head>
<body>
<div id="kaitou"></div>
<span style="left:20%;top:50%" >欢迎</span>
<span style="left:20%;top:20%">欢迎</span>
</body>
</html>
我设置的top属性都已经百分之50了，但是欢迎这两个字还是在阴影横线上，咋整，大佬们
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* {
margin:0px;
}
#kaitou {height:100px;
box-shadow:0 10px 1px gray;
}
</style>
</head>
<body>
<div id="kaitou">
<span style="left:20%;top:50%;vertical-align: top;">欢迎</span>
<span style="left:20%;top:20%;vertical-align: top;">欢迎</span>
</div>
</body>
</html>
大佬，你想要怎样的展示呢？
不要搞事情，那俩span都是行元素，一个top50，一个top20没意义吖！
位置调整太多了 简单的定位就可以的
<span style="position:absolute;left:20%;top:50%;vertical-align: top;">欢迎</span>
<span style="position:absolute;left:20%;top:20%;vertical-align: top;">欢迎</span>
可以使用displa改变为块元素就有用了,行内元素不生效的
猜测你是想让欢迎两个字在顶端距阴影的中间，既然你已经设了kaitou的高是100px,那么就可以设置span距顶的margin为50px:
<div id="kaitou">
<span style="position:absolute;left:20%;margin-top:50px;">欢迎</span>
</div>
效果图：
