How align a header

[newcoder1010]

Hello,

I have h1 tag. I would like to place it in center and then vertical align to middle. I was able to place it in center but I am not able to place it vertically in the middle. This is the css I have. I used padding top as workaround which works somewhat. I also placed vertical-align to middle but it did not do anything. Please advise. 

 

.node-type-properties h1 {
 display: block;
 /* background: blue; */
 background-image: url(/rincon/sites/default/files/bg-blue.png);
 height: 200px;
 background-repeat: no-repeat;
 width: 100%;
 text-align: center;
 /* vertical-align: middle; */
 padding-top: 7%;
 font-size: 55px;
 color: white;
}

 

[Ingolme]

Set the line-height to 200px, that will keep the text in the middle. This won't work if you need more than one line of text.

[newcoder1010]

I applied line height only to desktop version. For other devices, it will be two lines. Thank you.

[dsonesuk]

            .node-type-properties h1 {
                background-image: url("/rincon/sites/default/files/bg-blue.png");
                background-repeat: no-repeat;
                color: white;

                font-size: 55px;
                background: #ccc none repeat scroll 0 0;
                height: 200px;
                text-align: center;

            }
            .node-type-properties h1::before {
                content: "";
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
            .node-type-properties h1 span {
                display: inline-block;
                vertical-align: middle;
            }

<div class="node-type-properties"><h1><span>TODO write content, TODO write content</span></h1></div>