正确的文本与绝对位置对齐
Proper text align with absolute position
很简单的事情,但我迷失在这个..
我有正方形,里面是标题和段落。我需要的是在标题下方简单对齐段落,但由于某些不明原因,仍然有一些 space 阻止我正确对齐。我正在使用绝对定位,您可以在下面的代码中看到。
非常感谢你让我摆脱这个! :)
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>
绝对是 <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>
尝试删除 <br>
标签。我已经建立了一个 JSBin 给你看这里:
很简单的事情,但我迷失在这个..
我有正方形,里面是标题和段落。我需要的是在标题下方简单对齐段落,但由于某些不明原因,仍然有一些 space 阻止我正确对齐。我正在使用绝对定位,您可以在下面的代码中看到。
非常感谢你让我摆脱这个! :)
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>
绝对是 <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>
尝试删除 <br>
标签。我已经建立了一个 JSBin 给你看这里: