newcoder1010 Posted May 21, 2017 Share Posted May 21, 2017 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; } Link to comment Share on other sites More sharing options...
Ingolme Posted May 21, 2017 Share Posted May 21, 2017 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. Link to comment Share on other sites More sharing options...
newcoder1010 Posted May 21, 2017 Author Share Posted May 21, 2017 I applied line height only to desktop version. For other devices, it will be two lines. Thank you. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 22, 2017 Share Posted May 22, 2017 .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> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now