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

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

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

你可以设置position:相对于div.person span和div.person img元素。然后将div.person span的z-index设置为1。这将把span放到图像的上方。

示例代码:

div.person span, div.person img {
   position:relative
}
div.person span {
   z-index:1;
}

Answer 2

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

}

这修复了它，但它是相当hackish。我已经将span中的元素设置为显示块，但这并不是span元素的真正目的。

编辑:我可能误解了这个问题。你问的是垂直定心，而不是水平定心，我的代码就是这样做的。但你接着问，好像是关于z指数的。你能说清楚你在找什么吗?