Menu
CSS:
.header{
position: absolute;
top: 50%;
left: calc(50% - 200px);
opacity: 0.9;
color: #ffffff;
font-size: 35px;
text-shadow: 2px 2px 5px #000000;
}
HTML:
<body>
<div class="background"></div>
<div style="position: relative">
<div class="header"><label>A+ CMS</label></div>
</div>
</body>
Output:
The left property has works properly, but top property doesn't. I set 50% to top but the word "A+ CMS" keeps hang on the top of the screen.
If I change the value of top from percentage to px, it works. Why?
812
That's because it's 10% from the top of the its container, which currently is the height of the text so it's not moving.
If you add a height property to the container the top property will work. Here's an example of this: http://jsfiddle.net/bncteqzv/
.header{
position: absolute;
top: 10%;
left: calc(50% - 200px);
opacity: 0.9;
color: #ffffff;
font-size: 35px;
text-shadow: 2px 2px 5px #000000;
}
.test {
height: 500px;
}<body>
<div class="background"></div>
<div class="test" style="position: relative">
<div class="header"><label>A+ CMS</label></div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
