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>

住：

http://docs.aws.amazon.com/elasticbeanstalk/latest/dg/eb3-deploy.html

不管标题有多长，我都不确定如何将它定位在垂直中间。

有什么想法吗？

感谢。

编辑：

我想在左右边框上移动元素。图片： 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

Non-flexbox Demo

.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

提供下一张专辑和上一张专辑<UserControl xmlns:namespaceA="clr-namespace:MyProj.Models.ObjectANamespace" xmlns:namespaceB="clr-namespace:MyProj.Models.ObjectBNamespace" xmlns:namespaceC="clr-namespace:MyProj.Models.ObjectCNamespace" > <ListBox ItemsSource="{Binding ObjectACollection}"> <ListBox.ItemTemplate> <DataTemplate DataType="namespaceA:ObjectA"> <StackPanel Orientation="Horizontal"> <ListBox ItemsSource="{Binding ObjectBCollection}"> <ListBox.ItemTemplate> <DataTemplate DataType="namespaceB:ObjectB"> <TextBlock Text="{Binding ObjectBProperty}"/> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <ListBox ItemsSource="{Binding ObjectCCollection}"> <ListBox.ItemTemplate> <DataTemplate DataType="namespaceC:ObjectC"> <TextBlock Text="{Binding ObjectCProperty}"/> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </UserControl>
然后将display: table;添加到这些div内的锚标记。

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

Answer 5

您可以将相册盒类的css显示属性设置为table，将子级设置为table-cell，然后您可以使用vertical-align: middle;

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

Answer 6

已经在Stack Overflow中以各种形式询问了这个问题，但是在这里，只需将其添加到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。您可以查看浏览器support for Flex Box on caniuse.com。

您可以通过共享属性来简化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 Demo

将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

垂直对齐文本动态

8 个答案:

Non-flexbox Demo