html - 正确的文本与绝对位置对齐

Question

很简单的事情，但我迷失在这..

我有正方形，里面是标题和段落。我需要的是在标题下方简单对齐段落，但出于某种神秘原因，仍然有一些空间阻止我正确对齐。我正在使用绝对定位，您可以在下面的代码中看到。

非常感谢你让我摆脱这个! :)

SCSS

.wrapper-logo {
    position: absolute;
    border: 2px solid #fff;
    width: 230px;
    height: 230px;
    top: 24%;
    left: 60%;

    .header-logo {
        background-image:url(../img/header.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 210px;
        height: 210px;
        margin: 8px;
        border: 0;

        h1 {
            margin: 0!important;
            padding: 80px 0 0;
            vertical-align: middle;
            text-align: center;
            text-transform: uppercase;
            font-size: 220%;
            letter-spacing: 3px;
            color: $dark;
            font-weight: 500;
        }

        p {
            margin: 0!important;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 3px;
            word-spacing: 2px;
            color: $grey;
            line-height: 0px;
        }
    }
}  

HTML

<div class="wrapper-logo">
    <div class="header-logo">
        <h1>My heading</h1><br>
        <p>My paragraph</p>
    </div>
</div>

Answer 1

尝试删除 <br>标签。我已经设置了一个 JSBin 供您在这里查看:

http://jsbin.com/jehijumayi/edit?html,css,output