Html 无法定位文本_Html_Css_Web

Html 无法定位文本

html css web

Html 无法定位文本,html,css,web,Html,Css,Web,我将一些文本居中对齐，然后使用top:20%对其进行定位。它工作得很好，但当我在它下面添加一段时，元素只是回到了开始位置（顶部：20%没有生效） .是的{ 宽度：100%；身高：50%；背景色：红色；文本对齐：居中； } 是的{ 字体大小：300%；位置：相对位置；最高：20%； } 必须将样式封装在类标记中，而不是id标记中 <html> <head> <style> .yes{ width : 1

我将一些文本居中对齐，然后使用top:20%对其进行定位。它工作得很好，但当我在它下面添加一段时，元素只是回到了开始位置（顶部：20%没有生效）


.是的{
宽度：100%；
身高：50%；
背景色：红色；
文本对齐：居中；
}
是的{
字体大小：300%；
位置：相对位置；
最高：20%；
}
必须将样式封装在类标记中，而不是id标记中
<html>
<head>
    <style>
        .yes{
            width : 100%;
            height : 50%;
            background-color: red;
            text-align: center;
        }
        .yes a{
            font-size : 300%;
            position: relative;
            top : 20%;
        }
    </style>
</head>
<body>
    <div class="yes">
        <a>Title</a>
        <p></p>
    </div>
</body>
</html>


.是的{
宽度：100%；
身高：50%；
背景色：红色；
文本对齐：居中；
}
是的{
字体大小：300%；
位置：相对位置；
最高：20%；
}

区别如下：
Id应该是唯一的，并且只能设置为文档上的一个元素。
类可以设置为Dom中的多个元素
 如何重复和验证它？以下代码段在last Chrome中运行良好。添加段落后标题不移动
UPD。这种情况可以用高包装纸重复。因此，解决方案就是让显示到块

.wrp{高度：400px；}
.是的{
宽度：100%；
身高：50%；
背景色：红色；
文本对齐：居中；
}
是的{
显示：块；
字体大小：300%；
位置：相对位置；
最高：20%；
}

标题

标题

拉小提琴。我不能用你的代码重复它。我认为top:20%
将在你设置display:block
用于。是a
@shukshin.ivan当我拉小提琴时，div不会占据屏幕的50%。所以它不会生效。@shukshin.ivan这是我整个代码的粘贴栏：“不是id标签”-什么“id”标签？我没有在他们的代码中看到#
或id=“x”
。您需要删除所有与id有关的内容。谢谢！这似乎已经做到了。介意解释一下显示器：block的功能吗？我对这一点相当陌生。这是一个很好的问题，inline
元素在div中单独存在时，为什么会表现为一个block元素。值得知道的是。
<html>
<head>
    <style>
        .yes{
            width : 100%;
            height : 50%;
            background-color: red;
            text-align: center;
        }
        .yes a{
            font-size : 300%;
            position: relative;
            top : 20%;
        }
    </style>
</head>
<body>
    <div class="yes">
        <a>Title</a>
        <p></p>
    </div>
</body>
</html>