动态垂直对齐文本

Question

相册的标题是从管理面板动态生成的。

因此，问题在于标题的长度不同。

它们用于在实际专辑下方导航（上一个和下一个）...

码：

<div class="album-box">
    <div class="prev-album pull-left">
        <a href="">Dynamically generated title</a>
    </div>
    <div class="next-album pull-right">
        <a href="">Dynamically generated title in
            Dynamically generated title 3
            Dynamically generated title rows</a>
    </div>
</div>

生活：

的jsfiddle

不管标题多长，都不确定如何将其垂直放置在中间。

任何想法？

谢谢。

编辑：

我想在左右边框上移动元素。 图片：

Answer 1

使用flex ： https : //jsfiddle.net/58eh0r2g/1/

将以下代码添加到父容器。

display: flex;
align-items: center;
justify-content: center;

在您的情况下，这些将是.prev-album和.next-album

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

该解决方案将失去对某些IE版本的支持，但是flex如此强大，值得使用。

Answer 2

您有很多好的答案。

这是另一个使用display:table

非弹性盒演示

.prev-album, .next-album {     
  font-size: 12pt;
  padding: 20px 0;
  color: red;
  display: table;
}

.album-box a{
  display: table-cell;
  vertical-align: middle;
}

Answer 3

如果您想掌握一个新的很棒的CSS ...，那么我将使用flexbox。 Flexbox具有一个称为align-items的属性，该属性将垂直对齐flex项（子项）。

在这里阅读： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

浏览器支持正在增长，但移动设备和IE10将需要-ms-或-webkit-前缀。

Answer 4

给出下一个专辑和上一个专辑的display: table;
然后添加display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle; 到这些div内的定位标记。

我还更新了您的jsfiddle以显示我的答案。 https://jsfiddle.net/58eh0r2g/7/

Answer 5

您可以将album-box类的css display属性设置为table ，将child设置为table-cell ，然后可以使用vertical-align: middle;

或者，您可以尝试显示flex ，但是某些浏览器不支持它。

Answer 6

这已被要求以各种形式遍布堆栈溢出，但在这里你去，只需将它添加到您的CSS：

.prev-album a, .next-album a { display: table-cell; text-align: center; vertical-align: middle; }

然后，更改display: inline-block到display: table上既.prev-album和.next-album 。

• 在JSFiddle上简单更新现有代码
• 对JSFiddle上现有代码的一些改进

您甚至可以选择使用flex box方法，但是较旧的浏览器将不支持它，尤其是Internet Explorer。 您可以在caniuse.com上查看浏览器对Flex Box的支持 。

您可以通过共享属性来简化CSS，因为它将减少代码并更易于管理：

.album-box, .prev-album, .next-album {
  border-color: green;
  border-style: solid;
  border-width: 0;
}

.album-box {
  display: block;
  width: 100%;
  float: left;
  border-bottom-width: 2px;
}

.prev-album, .next-album {     
  font-size: 12pt;
  height: 82px;
  display: table;
  padding: 10px 40px;
  width: 50%;
  text-align: center;
}

.prev-album {
  border-right-width: 1px;
}

.next-album {
  border-left-width: 1px;
}

.prev-album a, .next-album a {
  display: table-cell;
  vertical-align: middle; 
}

Answer 7

这是与迄今为止发布的解决方案不同的解决方案：

jsFiddle演示

结合使用transform和top / left并在a标签上绝对定位（相对于父元素是绝对位置）：

.prev-album, .next-album {     
  font-size: 12pt;
  padding: 20px 0;
  color: red;

  // added this
  position: relative;
}

// and these
.prev-album a, .next-album a {
  padding: 10px 40px;     
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

Answer 8

由于要在垂直轴的中心动态对齐文本，请尝试使用以下方法：

HTML：此处的内容

CSS：#parent {display：table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

我已经在上述代码中修改了上述代码： http ://plnkr.co/edit/PdK9YWGUvbuGAW7S00x9? p= preview