JZK JZK - 20 days ago 5
CSS Question

Proper text align with absolute position

very simple thing, but I've got lost in this ..

I have square where inside of it is heading and paragraph. What I need is simple align paragraph right under heading, but from some misterious reason there is still some space which blocks me from proper aligning. I'm using absolute positioning as you can see in code below.

Thank you soo much to get me off this! :)

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

Try removing the <br> tag. I've set up a JSBin for you to take a look at here:

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