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

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

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

Answer 2

尝试删除<br>标记。我已经为你设置了一个JSBin来看看这里：

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

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

2 个答案: