Vertically Align Text in Google Sites

Question

I thought I'd be spiffy in Google Sites and change a banner at the bottom of my site from letting Google auto-code it to doing it myself. I wanted to have an orange rectangle with 2 lines of text centered horizontally and vertically. I was able to do everything except center the text vertically. I tried many different StackOverflow solution but none seem to be working. Anyone else done this or see what I've done wrong?

Here's some code I tried to do based on 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>

score 0 · Answer 1 · answered Sep 12 '15 at 03:02

Not sure if this is "the answer" but Google makes no quams that they limit styling abilities. I switched to using a CSS Table as recommended by Colin Toh and it seems that this is OK for Google Sites.

This is what I came up with.

<div style="margin-top: 50px; margin-bottom: 50px; background-color: #f16739; height: 100px; width:100%; display:table">
  <div style="display: table-cell; vertical-align: middle; text-align: center; background-color: transparent; font-size: 16px">
    <span style="color: #ffffff; letter-spacing: 1px; line-height: 24px">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/public_2-1-1/home#contactus" style="color:#ffffff">Contact us</a> today to schedule your free consultation.
    </span>
  </div>
</div>

Vertically Align Text in Google Sites

1 Answers1