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 do I change the border lines COLOUR on the table view

    How do I limit the number of cells on a row in CSS

    How to style this with css? [closed]

    How to make existing javascript/css files be compitable in Google Chrome?

    How to horizontally stack elements using CSS?

    how to align element to bottom of page in print preview

    How to Make Text Stay Inside Div?

    How can clients without Ruby view web pages using SASS?

    How do I put a scrollable div next to a non-scrollable div using CSS?

    How to display row of images in a repeater control vertically instead of horizontally

    How can I align centered inline-block elements correctly?

    CKEditor 4: How to add CSS stylesheet from plugin?

    How to target CSS module classes after they are hashed?

    How do I completely remove all references to application.js and application.css in a Rails app?

    How to remove underline in css for anchors pseudo element in IE

    CSS/PHP: How to make the next div appear on the side instead

    How to make a css navigation menu “selected” option still clickable

    jquery - how to change the display css attribute of a button within a li on hover

    How to position the sharing buttons on upper-left corner of the game and not the view?

    Android App with HTML/CSS/jQuery. [How] Can it be done?

    How to set the container height automatically maintaining the ratio

    How to make compatibale a css design for all the browsers?

    How to keep the navbar fixed to top in big screens only using jquery

    Showing submenu on mouseenter but disappears on hover

    How to write CSS keyframes to indeterminate material design progress bar

    how can a media query detect a full-hd smartphone?

    CSS how to change color of a specific primary-panel in a if-block

    How to ignore css class

    How-to set background-position-x?

    How to Make Hover Background Fade Smoothly In and Out?