页面两侧垂直对齐的 div

Question

我们将网络应用程序的精简版作为 iframe 嵌入到第三方页面中。我想要一个底部 "toolbar"，包含 2 个 link，其中一个是纯文本，另一个是我们公司的标志以文本开头。我希望两个 link 位于对角，并垂直对齐包含工具栏 div 的中间。使用 this approach here's what I've got so far 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>

问题是我所做的一切都是为了让左侧的 link 正确垂直对齐（因为文本与图像对齐）要么什么都不做，要么破坏水平对齐。因为我无法控制甚至不知道嵌入的 iframe 会有多大，所以任何关于固定像素数（比如使用位置：绝对）的东西都是正确的。我相信这应该很容易，但作为一个后端开发人员，我正在为它撕裂我的头发。此外，我宁愿避免使用任何第三方库，例如 bootstrap，因为我的主应用程序没有使用它们，而且我不希望现有依赖项中的任何全局设置被覆盖。

Answer 1

垂直对齐很痛苦。 link 中解释的技术让我觉得有点复杂。

我所做的是我有一个绝对定位的 div，具有这些值：

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

要完成这项工作，我的页脚必须有 position:relative。

这样做的好处是不需要 "filler" div 或类似的东西。在我在这里展示的解决方案中，我制作了一个具有上述属性的 class "vAlign"，然后我在 [=34] 中添加了 "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>

Answer 2

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

页面两侧垂直对齐的 div

vertically aligned divs on opposite sides of page

html

css

vertical-alignment