如何在图像上垂直居中我的名字

Question

我右边的名字应该位于当前位于其下方的图像前面。我该如何解决？

https://jsfiddle.net/L18cunx2/

<div class="container">
    <div class="row">
        <div class="one columns">
            <input class="bbar" placeholder="search">
        </div>
        <div class="eleven columns person">
            <span><a class="username">Rajat Sharma</a></span> <img alt="" src="logout.png">
        </div>
    </div>
</div>

Answer 1

.username {
display: block;
margin: 0 auto;
text-align: center;

}

这解决了它，但它非常hackish。我将跨度中的元素设置为显示块，但这并不是span元素的意图。

编辑：我可能误解了这个问题。你问的是垂直居中，而不是水平居中，这就是我的代码所做的。但接下来你会继续询问z-index。你能澄清一下你在寻找什么吗？

Answer 2

我对你的问题有点不清楚，但我会尽力回答。您将要在div.person容器中创建堆叠上下文。

您可以设置位置：相对于div.person span和div.person img元素。然后，为div.person span设置z-index为1。这会将跨度放在图像上方。

示例代码：

package org.odk.collect.android.logic does not exist
package org.odk.collect.android.exception does not exist

希望这有帮助。