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.


    CSS Howto..

    How could I center a div that is inside a div? Auto margins aren't working

    How do I use CSS to reposition this image?

    How do I stop css pushing
  • to the right?
  • How to replace 31 css classes with just one

    How to hide part of css when input is empty?

    How to Stop jQuery from Buffering Hover Effects?

    In a html table cell, how can i force images to be the bottom left and the bottom right that have different heights?

    how to use css align control one row

    How to use CSS to square the corner on a submit button

    Show / Hide HTML using swatch / HTML 5 - dynamic HTML

    section to be trigger of show/hide content by click html/css only

    Resharper: How to suppress inspection errors resulting from CSS hacks?

    How to create Box Shadow rollover and hover css navigation?

    How to make padding:auto work in CSS?

    How to build native C++ apps with HTML/CSS UI?

    How to mail HTML/CSS output as attachment?

    How do I require main.css.erb in application.css

    How do I center “my” navigation bar?

    HTML & CSS: How to create four equal size tabs that fill 100% width?

    how to create an alphabet letter selector that spans an entire div width

    How to change dropdown submenu second level background?​

    CSS, how to put a div inside a div that is responsive?

    How can i make 3 independently scrollable columns

    How to control the layout in JSF?

    What do i need and how do I start to adjust the css of a website with “encrypted” .gz files

    CSS3 Menu Shows Up Wrong (CSS3/HTML5)

    how to use css to style a descendant (not a direct child) of an element?

    How to use a custom toggle switch in jquery mobile

    How can I adjust image width and height to 100 x 100 keeping ratio?

    Navigation bar - How to keep the page highlighted when selected?