页面两侧垂直对齐的 div

Question

我们将 Web 应用的精简版本作为 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 会有多大，所以任何关于固定像素数（比如使用位置：绝对）的东西都是正确的。 我相信这应该很容易，但作为一名后端开发人员，我正在为它撕毁我的头发。另外，我希望避免使用任何第三方库，例如 bootstrap，因为我的主应用程序没有使用它们，而且我不希望现有依赖项中的任何全局设置被覆盖。

Answer 1

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

要将链接垂直对齐到中间，您需要为 #my-footer 元素提供 line-height。

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

以下 sn-p 可能对您有用：

* {
  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%);
}

要完成这项工作，my-footer 必须有 position:relative。

这样做的好处是不需要“填充” div 或类似的东西。在我在这里展示的解决方案中，我创建了一个具有上述属性的类“vAlign”，然后我在 CSS 中为每个页脚元素添加了“left:5px”和“right:5px”（我创建了“ 'Powered by' 部分的 company-link" 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>