在Google协作平台中垂直对齐文本

Question

我以为我会在Google协作平台中大为改观，并在网站底部更改横幅，从让Google自动编码到自己动手做。 我想要一个橙色矩形，其中水平和垂直居中的两行文本。 除垂直居中对齐文字外，我能够执行所有操作。 我尝试了许多不同的StackOverflow解决方案，但似乎都无法正常工作。 其他人这样做还是看到我做错了什么？

这是我根据此解决方案尝试执行的一些代码： 如何使用CSS将文本垂直居中？ （我的是基于引用SebastianEkströ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>

Answer 1

不确定这是否是“答案”，但Google并不认为它们会限制样式功能。 我改用了Colin Toh推荐的CSS表，看来对于Google协作平台来说还可以。

这就是我想出的。

<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>