html - 无法放置文字

我将一些文本居中对齐，然后使用top：20％定位。效果很好，但是当我在其下添加一个段落时，该元素只是移回开始位置（最高：20％无效）。

    <style>
    .yes{
            width : 100%;
            height : 50%;
            background-color: red;
            text-align: center;
        }
        .yes a{
            font-size : 300%;
            position: relative;
            top : 20%;
        }
    </style>

    <div class = "yes">
    <a>Title</a>
    <p></p></div>

更新：出于某种原因，在jsfiddle上，div不会显示为50％的高度，因此很难看到我所指的问题。这是查看代码的链接。只需删除p标签即可看到效果：http://liveweave.com/owjs3W#&togetherjs=xwdArBqd5t

最佳答案

如何重复和验证？以下代码段在最后一个Chrome浏览器中正常运行。添加段落后标题不会移动。

UPD。可以用一个高大的包装纸来重复这种情况。因此，解决方案只是使a display变为block。

    .wrp{height:400px;}
    .yes{
            width : 100%;
            height : 50%;
            background-color: red;
            text-align: center;
        }
        .yes a{
            display:block;
            font-size : 300%;
            position: relative;
            top : 20%;
        }

<div class="wrp">
    <div class="yes">
        <a>Title</a>
    </div>
</div>
<hr>
<div class="wrp">
    <div class="yes">
        <a>Title</a>
        <p></p>
    </div>
</div>

关于html - 无法放置文字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41915834/