Trying to spice up my Google Sites page, I decided to take matters into my own hands and customize the banner at the bottom of the site. My goal was to create an orange rectangle with two lines of text perfectly centered both horizontally and vertically. Despite successfully achieving most of what I wanted, I ran into trouble centering the text vertically. I attempted various solutions from StackOverflow, but none seemed to work for me. Has anyone else encountered this issue or can spot where I might have gone wrong?
I attempted to implement the code provided in this solution: How do I vertically center text with CSS? (Mine is based on the solution that references Sebastian Ekström)
<div style="margin-top: 60px;
margin-bottom: 60px;
background-color: #f16739;
height: 200px;
text-align: center">
<p style="color: #ffffff;
font-size: 16px;
letter-spacing: 1px;
line-height: 24px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
top: 50% transform:
translateY(-50%);">Plan: B Cleaning works with your schedule so you can enjoy more of what you love.<br><a href="https://sites.google.com/a/planbcleaning.com/planbcleaning2-0/home#contactus">Contact us</a> today to schedule your free consultation.
</p>
</div>