在页面

Question

我们将精简版的网络应用程序嵌入到第三方页面中，作为iframe。 我想要一个底部的“工具栏”，其中包含2个链接，其中一个是纯文本，另一个是我们公司徽标的文本开头。我希望两个链接位于相对的角，并垂直对齐到包含工具栏div的中间。到目前为止，我使用this approach是Fiddle：

<div id="main-app"></div>

<div id="my-footer">
  <span id="full-link" class="assert-position"><a href="https://url.to.webapp" target="_blank" class="assert-position">View full size</a> </span> <div id="filler" class="assert-position"></div> Powered by
  <a href="http://www.company-landing-page.co.uk" target="_blank" class="assert-position"> <img src="/images/my-company_logo.png"/></a>
</div>
<style>
     *{
       margin: 0;
       padding: 0;
     }

      html, body {
        height: 100%;
      }

      #main-app {
          height: 90%;
          width: 100%;
      }

      #my-footer {
        height: 10%;
        width: 100%;
        background-color: #0f0f0f;
        color: #FFF;
        text-align: right;
        font-family: Tahoma, Arial, "sans-serif"
      }

      #full-link {
        float: left;
        text-align: left;
        font-family: Tahoma, Arial, "sans-serif";
        font-size: small;
        color: #FFF;
      }

      #filler {
        height: 100%;
      }

      #my-footer img{

        margin: 3px;
      }

      .assert-position{
        display: inline-block;
        vertical-align: middle;
      }

      #full-link a:visited{
        color: #FFF
       }
</style>

问题在于，我为使左侧链接正确垂直对齐所做的一切工作（如文本与图像对齐）要么不起作用，要么破坏水平对齐。因为我不控制甚至不知道嵌入式iframe的大小，所以就固定像素数（例如使用position：absolute）而言，任何事情都是正确的。 我敢肯定，这应该很容易，但是作为一个后端开发人员，我正在将自己的头发拔掉。另外，我宁愿避免使用任何第三方库（例如引导程序），因为我的主应用程序未使用它们，并且我不希望覆盖现有依赖项中的任何全局设置。

Answer 1

演示：http://jsfiddle.net/kbjycez2/68/

要将链接的中间位置垂直对齐，需要为＃my-footer 元素提供行高。

我已使用flex模型将您的链接左右对齐。

以下代码段可能对您有用：

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#main-app {
  height: 90%;
  width: 100%;
}

#my-footer {
  height: 10%;
  width: 100%;
  background-color: #0f0f0f;
  color: #FFF;
  display: flex;
  font-family: Tahoma, Arial, "sans-serif";
  justify-content: space-between;
  line-height: calc(10vh);
}

#my-footer img {
  vertical-align: middle;
}

#full-link a:visited {
  color: #FFF
}

<div id="main-app"></div>

<div id="my-footer">
  <div>
    <a href="https://url.to.webapp">View Full Size</a>
  </div>
  <div>
    <span>Powered By </span>
    <a href="http://www.company-landing-page.co.uk"><img src="/images/my-company_logo.png" /></a>
  </div>
</div>

Answer 2

垂直对齐是一种痛苦。链接中解释的技术使我感到有点复杂。

我要做的是，使用以下值对div进行绝对定位：

{
    top:50%;
    transform:translateY(-50%);
}

要执行此操作，我的页脚必须具有position:relative。

这具有不需要“ filler” div或类似内容的优点。在这里显示的解决方案中，我制作了一个具有上述属性的“ vAlign”类，然后在CSS中为每个页脚元素添加了“ left：5px”和“ right：5px”（我创建了“公司链接”（“技术支持”部分的ID），从而无需浮动。我还增加了页脚的高度，以使垂直对齐更加明显。

     *{
       margin: 0;
       padding: 0;
     }

      html, body {
        height: 100%;
      }

      #main-app {
          height: 70%;
          width: 100%;
      }

      #my-footer {
        position:relative;
        height: 30%;
        width: 100%;
        background-color: #0f0f0f;
        color: #FFF;
        text-align: right;
        font-family: Tahoma, Arial, "sans-serif"
      }

      #full-link {
        left:5px;
        text-align: left;
        font-family: Tahoma, Arial, "sans-serif";
        font-size: small;
        color: #FFF;
      }

      #filler {
        height: 100%;
      }

      #my-footer img{

        margin: 3px;
      }

      #full-link a:visited{
        color: #FFF
       }
       
      #companyLink {
        right:5px;
      }
       
      .v-align {
         position:absolute;
         top:50%;
         transform:translateY(-50%);
      }

<div id="main-app"></div>

<div id="my-footer">

  <div id="full-link" class="v-align"><a href="https://url.to.webapp" target="_blank" class="assert-position">View full size</a> </div>
  
  <div id="companyLink" class="v-align">Powered by <a href="http://www.company-landing-page.co.uk" target="_blank"><img src="/images/my-company_logo.png"/></a><div>
  
</div>