Jquery 在基于百分比的设计中，文本是否垂直居中？

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

应该包括的内容之一是投资组合“列表”。这是一个项目列表，每个项目都包含一个图像（该图像应自动调整自身以适应其所在容器的大小）和一个标题，位于其旁边

但是：它不应位于顶部，而应垂直居中。我尝试了一些关于Stackoverflow和其他网站的建议。但是什么都没用

请查收

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

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

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

---

所以我希望有人知道解决办法。请记住：它应该是基于百分比的，因为所有其他的都是基于百分比的。

也许您正在寻找这样的东西：

加入

position:relative

对于您的容器，我可以为子元素指定单独的位置，这允许我相应地将文本居中。如果这不是你想要的，请告诉我

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

以及单个图像（添加了一个跨度以减少选择问题）：

---

好吧，让这个旋转一下。垂直对齐文本不像使用文本对齐那么容易-我给了跨度100%的高度，然后根据使用的字体大小将其塞入一定数量的像素。我注意到您已将字体大小设置为100%-我的解决方案需要设置字体大小。为了它的价值！嘿在小提琴中，它似乎是正确的。让我在我自己的整体标记中尝试一下。提前感谢！：）是啊！完全正确。可以完美地实现它。非常感谢！：）令人惊叹的！很高兴它成功了！我相信CSS 4会解决垂直对齐文本的问题。你知道这个问题的解决方案吗？>——当整个文本的宽度小于内部文本时，文本会被分成两行（当然）。有没有可能使文本居中，即使是在两行中？：）-图像显示的不是那么好。。除了使用真实的媒体查询（因为它使用的是后台封面：cover now），没有什么解决方案

.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;
}