0

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

应该包括的一件事是投资组合“列表”。这是一个项目列表，每个项目都包含一个图像（应该自动调整到它所在容器的大小）和一个标题，旁边是它。

但是：它不应位于顶部，而应垂直居中。我在 Stackoverflow 和其他网站上尝试了一些建议。但无法得到任何工作。

请检查这个 JSfiddle

我无法让事情正常进行，例如

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

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

所以我希望有人知道一个解决方案。请记住：它应该基于百分比，因为其余的也是。

4

1 回答 1

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;
}
于 2013-10-07T17:23:30.620 回答