Question

我将一些文本居中对齐，然后使用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

Answer 1

如何重复和验证？以下代码段在上一个Chrome中运行良好。标题在添加段落后不会移动。

UPD。有关的情况可以用高大的包装纸重复。因此，解决方案就是将a display设为block。

＆＃13;

    .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%;
        }

＆＃13;

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

＆＃13;

Answer 2

您必须将样式封装在类标记内而不是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>

see it in action

差异如下： Id应该是唯一的，只能在Document上设置一个元素。可以将类设置为Dom中的多个元素。

无法定位文字

2 个答案: