How do I vertically align my multi-line p tag in my header?

Tags: html,css,sass

Problem :

I'm really struggling with vertically centering a p tag in my HTML. I'm trying to follow the method found here, but I can't seem to get it to work.

.site-header {
    background: #27112e url("/assets/header-bg.png") no-repeat;
    height: 220px;
    position: relative;

    .inner-header {
        font-family: "museo-sans", Avenir, sans-serif;
        margin: auto;
        max-width: 850px;
        min-width: 150px;
        width: 75%;
        display: table;

        .name {
            float: left;
            font-family: "ff-tisa-web-pro", Georgia, serif;
            font-size: 1.8em;
            line-height: 40px;
            margin: 65px 55px 0 0;
            display: table-cell;
            vertical-align: middle;
        }
    }
}

The first two are just divs, and .name is an h1.

Hopefully that CSS is enough to make it clear what I'm trying to accomplish. I just want a "name" string that can be multiple lines long to be vertically centered no matter how many lines it's showing.

What am I doing wrong?

---

Solution :

Rewrite your CSS at first - to

.site-header {
    background: #27112e url("/assets/header-bg.png") no-repeat;
    height: 220px;
    position: relative;
}

.inner-header {
    font-family: "museo-sans", Avenir, sans-serif;
    margin: auto;
    max-width: 850px;
    min-width: 150px;
    width: 75%;
    display: table;
}

.name {
    float: left;
    font-family: "ff-tisa-web-pro", Georgia, serif;
    font-size: 1.8em;
    line-height: 40px;
    margin: 65px 55px 0 0;
    display: table-cell;
    vertical-align: middle;
}

I have not ever seen that your CSS code would be possible. Also you may improve your CSS with div.site-header div.inner-header h1.name or div.site-header > div.inner-header > h1.name.

And it would be good to change yourn code into:

<div class="site-header">
    <div class="inner-header">
        <h1 class="name">
    </div>
</div>

as ElefantPhace says. Then all should be easier.