Question

如何在响应式框中垂直对齐文本？我为图像做了，但它不适用于span，不知道为什么。以下是我完成的一半演示：

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>

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

Answer 2

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

Answer 3

将line-height：100px;属性添加到父div元素，并删除img的css设置：

＆＃13;

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

＆＃13;

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

＆＃13;

对于只有一行文字，如果父级height等于line-height，则内部上下文元素将为垂直对齐。请参阅Understanding vertical-align, or "How (Not) To Vertically Center Content"

Answer 4

您可以通过多种方式执行此操作

<强> 1。您可以将line-height提供给与父div的span相同的height。所以在你的情况下，它应该是

span {line-height: 100px;}

<强> 2。您可以将父div设为display: table，将范围设为display: table-cell。然后将vertical-align: middle提供给它。

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

响应框中的垂直对齐文本不起作用

4 个答案: