垂直置于一个基于百分比的设计中心文本？

Question

所以我创造了各种手机屏幕的设计。而不是使用多个@media查询，即时创建一个基于百分比和接受的所有品种屏幕的设计。

其中一个应包含的东西是一个投资组合列表“。这是一个项目列表，每个都包含一个图像（即会自动调整自身的容器它在尺寸）和一个标题，在它旁边。

然而：代替位于顶部，但是应当垂直居中。我试过＃2和其他网站的几个建议。但无法得到任何工作。

请检查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;
}