jquery - 在基于百分比的设计中垂直居中文本？

Question

所以我正在为各种手机屏幕创 build 计。我没有使用多个@media 查询，而是创建了一个基于百分比的设计，并且可以接受各种屏幕。

其中应该包含的内容之一是投资组合“列表”。这是一个元素列表，每个元素都包含一个图像(应该自动调整自身以适应其所在容器的大小)和一个标题，旁边是一个标题。

但是:它不应位于顶部，而应垂直居中。我在 Stackoverflow 和其他网站上尝试了一些建议。但是什么也做不了。

请查看this JSfiddle

我无法让事情正常工作，比如

div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}

所以我希望有人知道解决方案。请记住:它应该以百分比为基础，因为其他所有内容也是如此。

Answer 1

也许您正在寻找这样的东西:JSFiddle ？

通过添加

position:relative

然后我可以为您的容器指定子元素的单独定位，然后允许我以响应方式将文本居中。如果这不是您要找的，请告诉我。

.port_nav {
    background-color:rgba(255,255,255,0.3);
    width:80%;
    margin: 88px auto 0 auto;
    height:80%;
    position: relative;
}

以及单个图像(添加了一个跨度以减少选择问题):

.port_nav .item .image {
    position: relative;
    width:30%;
    float:left;
    height:100%;
    background-color:rgba(255,255,255,0.3);
}

.port_nav .item .image span {
    position: absolute;
    width: 100%;
    text-align:center;
}