这是一个关于HTML的神奇问题 5C
<!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了,但是欢迎这两个字还是在阴影横线上,咋整,大佬们

6个回答

<!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>

caozhy
每个人都有一个梦才不会孤单的说话就有天堂 回复qq_43412960: 这是相对的,要看参照的高度是多少像素,50%是一半
9 个月之前 回复
qq_43412960
qq_43412960 百分之50 是多少像素啊 大佬
9 个月之前 回复

大佬,你想要怎样的展示呢?
不要搞事情,那俩span都是行元素,一个top50,一个top20没意义吖!

wutiantesi
悟天特斯 回复qq_43412960: 位置调整的方式太多了
9 个月之前 回复
qq_43412960
qq_43412960 有的 宝贝 搞 个position定位就行
9 个月之前 回复

位置调整太多了 简单的定位就可以的

qq_43412960
qq_43412960 谢谢
9 个月之前 回复
<span style="position:absolute;left:20%;top:50%;vertical-align: top;">欢迎</span>
    <span style="position:absolute;left:20%;top:20%;vertical-align: top;">欢迎</span>

图片说明

qq_43412960
qq_43412960 谢谢
9 个月之前 回复

可以使用displa改变为块元素就有用了,行内元素不生效的

猜测你是想让欢迎两个字在顶端距阴影的中间,既然你已经设了kaitou的高是100px,那么就可以设置span距顶的margin为50px:

   <div id="kaitou">
    <span style="position:absolute;left:20%;margin-top:50px;">欢迎</span>
    </div>
效果图:
![图片说明](https://img-ask.csdn.net/upload/201907/05/1562337669_732505.jpg)
Michaelia_hu
冥灵树 不知道为什么看不到图片,你可以自己试试
9 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问