响应式容器中的文本垂直居中无效

Question

我该如何在响应式盒子中垂直对齐文本？我已经为图像垂直对齐了，但对于标签却不起作用，不知道为什么。以下是我未完成的演示：

img{
    width:20px;
}

div{
    width:100px;
    height:100px;
    background:#ddd;
    padding:10px;
}

img{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

<div>
    <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/256/football.png"/>
    <span>football</span>
</div>

- Alicia

Answer 1

尝试这个。

img{
    width:20px;
    padding:2px;
}

div{
    width:100px;
    height:100px;
    background:#ddd;
    padding:10px;
}

img,span{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    float: left;
}

Demo Here

- Shrinivas Pai

---

我很高兴能帮到你。 - Shrinivas Pai

Answer 2

在父级div元素中添加line-height: 100px;属性，并删除img的CSS设置：

img{
    width:20px;
}

div{
    width:100px;
    height:100px;
    background:#ddd;
    padding:10px;
    line-height:100px;
}

<div>
    <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/256/football.png"/>
    <span>football</span>
</div>

如果父元素的height等于line-height，那么只有一行文本的情况下，内部上下文元素将会垂直对齐。请参见理解vertical-align或“如何（不）垂直居中内容”

- monjer

Answer 3

span{
 line-height:100px; /* same as parent elements's height */
}
img{
    position: relative;
    top: 4px;
    /* remove transform */  
}

- Domain

Answer 4

您可以用多种方式来实现这个目标

1. 您可以将 span 的 line-height 设置为与父级 div 的 height 相同。在您的情况下，应该是这样的：

span {line-height: 100px;}

2. 你可以将父级 div 设置为 display: table，将子元素的 span 设置为 display: table-cell。然后给它添加 vertical-align: middle 属性。

div {display: table;}
span {display: table-cell; vertical-align: middle; }

- Murshid Ahmed