- This topic is empty.
May 24, 2013 at 10:25 pm #45036StephensSpaceMember
I am working on a website that requires a ‘coming soon’ page.
I envisioned a four-checkered background that would change colors when hovered over. In addition to that I envisioned a line of text saying “Are you ready?” would be centered vertically and horizontally.
For whatever reason, when I added the text it didn’t show. I figured out how to make it display but it didn’t make sense why.
I have to use z-index: 1; and position: absolute;(or relative) to make it show up.
This would be fine but I can no longer use ‘text-align’ to center the string of text.
I am relatively new to CSS positioning so I believe that is where I’m failing.
If someone would be so kind as to point out my error and explain the cause I would be greatly appreciative.
Thanks in advance,
StephensSpaceMay 25, 2013 at 3:15 am #136411CodeGraphicsParticipant
Set the z-index of your 4 divs: **topleft, topright, bottomleft** and **bottomright** to a negative 1. **z-index:-1;** so that the text will come on top of them. Give your text div a width of 800px and center it vertically and horizontally using margin. **margin: 220px auto 0 auto;**
[Codepen FullScreen](http://codepen.io/alex13/full/uGEJn “”)May 25, 2013 at 3:20 am #136412CodeGraphicsParticipant
By The Way, try to be grouping your divs and separate them with commas and apply common style to them.May 25, 2013 at 5:24 am #136415David_LeitchParticipant
I had a bit of a play around with the idea and came up with another solution [here](http://codepen.io/David_Leitch/full/cCxAm “Dave’s solution, yo”). It does what you need it to do, but is styled a little differently using Sass. Hope it helps :)May 25, 2013 at 8:18 am #136441Kitty GiraudelParticipant
> Set the z-index of your 4 divs: topleft, topright, bottomleft and bottomright to a negative 1. z-index:-1; so that the text will come on top of them. Give your text div a width of 800px and center it vertically and horizontally using margin. margin: 220px auto 0 auto;
It will work in this particular case but it’s definitely not the best solution if he wants it to be both horizontally and vertically centered no matter what. Table trick, absolute position or flexbox is the key.May 25, 2013 at 7:52 pm #136498
- The forum ‘CSS’ is closed to new topics and replies.