我们将 Web 应用程序的精简版本作为 iframe 嵌入到第三方页面中。我想要一个底部“工具栏”，包含 2 个链接，其中一个是纯文本，另一个是我们公司徽标，以文本开头。我希望这两个链接位于相对的角落，并与包含的工具栏 div 的中间垂直对齐。使用这种方法，这是我到目前为止所得到的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）的东西都是正确的。我确信这应该很容易，但作为一名后端开发人员，我内心深处正在为此抓狂。另外，我宁愿避免使用任何第三方库（例如 bootstrap），因为我的主应用程序不使用它们，并且我不希望现有依赖项中的任何全局设置被覆盖。

解决方案

演示： 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>