Uaithne 543 Share Posted August 20, 2017 Okay, so I've had this issue for awhile on some random templates I have chilling around. Essentially everything looks good, but the title text ends up lodged upward into the picture above. (Ie: the "WORDS WORDS" should be centered vertically in the green area.) I've tried using padding to center it, using vertical alignments, display blocking it, changing font size, changing the green background size. Really I've just been throwing random things in trying to make the text centered vertically in the green background. Here's a screenshot: Here's the code: <style type="text/css"> .s1pictr {max-width: 450px; height: 250px; opacity:0; background-color: #d0e9db; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s;} .s1pictr:hover {opacity:8} .s1info {max-width: 410px; height: 230px; font-size: 10px; color: #000000; padding: 10px 10px 10px 10px; line-height: 120%; text-align: justify; margin: 10px; overflow: auto;} .s1chrt1 {max-width: 450px; height: 40px; background-color: #0c2d1a; font-family: georgia, serif; font-size: 35px; color: #ffffff; text-transform: uppercase; text-shadow 2px 1px 1px #000000;} </style> <center><div style="background-image: url(http://i39.tinypic.com/2uylpu1.png); width:450px; height:250px"> <div class="s1pictr"> <div class="s1info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque, turpis non vestibulum sollicitudin, tortor lacus facilisis urna, vitae ultrices tellus dui non turpis. Nulla diam justo, cursus a rutrum quis, eleifend quis dui. Cras placerat velit sit amet enim rutrum fermentum et lacinia diam. Nam semper varius dolor, eu ultricies nulla tristique sit amet. Phasellus ut scelerisque enim, congue sodales magna. Sed vel ipsum dignissim, dignissim mauris vel, faucibus tellus. Sed ullamcorper orci et ipsum malesuada aliquet. Nam laoreet nisl sed fermentum ultrices. In convallis eu velit vitae convallis. Cras commodo quam adipiscing magna facilisis, ac tempus lectus pharetra. Phasellus fringilla libero non justo pretium euismod. Vivamus porttitor quam et ipsum facilisis, quis blandit odio viverra. Morbi sollicitudin nisl sed lorem volutpat, sed sollicitudin purus cursus. Aenean at auctor libero, vitae mattis elit.<br><br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vel imperdiet libero, ut accumsan tortor. Nam ac faucibus purus. Maecenas non dictum neque. In vitae suscipit erat. Proin in erat at tortor vestibulum placerat. Ut elementum imperdiet est, sed rhoncus augue viverra fringilla. Etiam dictum quis turpis a suscipit. Etiam tristique lacinia turpis id fermentum. Suspendisse non leo vitae ligula laoreet condimentum. Quisque nec ipsum tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Nunc quis elementum lectus, sed imperdiet ligula. Nulla facilisi. Curabitur pulvinar nec elit in cursus. Fusce facilisis mattis tincidunt. Curabitur rhoncus ante id rutrum suscipit. </div></div></div> <div class="s1chrt1">Words Words</div></center> Link to comment Share on other sites More sharing options...
Admin Morrigan 1,825 Admin Share Posted August 20, 2017 This should fix it: [dohtml]<style type="text/css"> .s1pictr {max-width: 450px; height: 250px; opacity:0; background-color: #d0e9db; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s;} .s1pictr:hover {opacity:8} .s1info {max-width: 410px; height: 230px; font-size: 10px; color: #000000; padding: 10px 10px 10px 10px; line-height: 120%; text-align: justify; margin: 10px; overflow: auto;} .s1chrt1 {max-width: 450px; height: 40px; background-color: #0c2d1a; font-family: georgia, serif; font-size: 35px; color: #ffffff; text-transform: uppercase; text-shadow 2px 1px 1px #000000;display:flex;justify-content:center;align-items:center;} </style> <center><div style="background-image: url(http://i39.tinypic.com/2uylpu1.png); width:450px; height:250px"> <div class="s1pictr"> <div class="s1info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque, turpis non vestibulum sollicitudin, tortor lacus facilisis urna, vitae ultrices tellus dui non turpis. Nulla diam justo, cursus a rutrum quis, eleifend quis dui. Cras placerat velit sit amet enim rutrum fermentum et lacinia diam. Nam semper varius dolor, eu ultricies nulla tristique sit amet. Phasellus ut scelerisque enim, congue sodales magna. Sed vel ipsum dignissim, dignissim mauris vel, faucibus tellus. Sed ullamcorper orci et ipsum malesuada aliquet. Nam laoreet nisl sed fermentum ultrices. In convallis eu velit vitae convallis. Cras commodo quam adipiscing magna facilisis, ac tempus lectus pharetra. Phasellus fringilla libero non justo pretium euismod. Vivamus porttitor quam et ipsum facilisis, quis blandit odio viverra. Morbi sollicitudin nisl sed lorem volutpat, sed sollicitudin purus cursus. Aenean at auctor libero, vitae mattis elit.<br><br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vel imperdiet libero, ut accumsan tortor. Nam ac faucibus purus. Maecenas non dictum neque. In vitae suscipit erat. Proin in erat at tortor vestibulum placerat. Ut elementum imperdiet est, sed rhoncus augue viverra fringilla. Etiam dictum quis turpis a suscipit. Etiam tristique lacinia turpis id fermentum. Suspendisse non leo vitae ligula laoreet condimentum. Quisque nec ipsum tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Nunc quis elementum lectus, sed imperdiet ligula. Nulla facilisi. Curabitur pulvinar nec elit in cursus. Fusce facilisis mattis tincidunt. Curabitur rhoncus ante id rutrum suscipit. </div></div></div> <div class="s1chrt1">Words Words</div></center>[/dohtml] One of my favorite tools to get the right CSS for centering is here: http://howtocenterincss.com/ I normally use unknown for everything that way it's more responsive. I hope that helps @Uaithne 1 Profile set made by myself and original Artwork by Fae Merriman, my daughter. Link to comment Share on other sites More sharing options...
Uaithne 543 Author Share Posted August 21, 2017 Thanks. That's a really cool tool. It unfortunately doesn't explain why mine doesn't work right, though I think there is probably a bigger issue with my overall code. 1 Link to comment Share on other sites More sharing options...
Admin Morrigan 1,825 Admin Share Posted August 21, 2017 No, you're code was fine. It requires the display: flex; which is what allows the align-items CSS to work. 1 Profile set made by myself and original Artwork by Fae Merriman, my daughter. Link to comment Share on other sites More sharing options...
Uaithne 543 Author Share Posted August 28, 2017 Thanks, dude. It works now! It seems that the addition of display:flex and the content align resolved the issue. Muchos gracias. 1 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