css - 在向左浮动的 Div 中垂直居中图像

Question

这是用于移动网站标题。页面标题居中，后退按钮图像向左浮动。我希望后退按钮在 pageTitle div 中居中，但无法使其正常工作。

我发现如果我给 pageTitle div 一个 relative 的位置并且 backArrow 的顶部为 0 我可以绕过 pageTitle div 的填充但我不能再进一步了。提供 50% 的顶部或填充只会使情况变得更糟。

fiddle : http://jsfiddle.net/gjL4z/

CSS:

body {
    background-color: #666;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.pageTitle {
    text-align: center;
    padding: 10px;
    color: #ffffff;
    font-size: large;   
    background: #2281b5;
    position: relative;
}
.backArrow {
    float: left;    
    position:absolute; 
    top: 0;  
}

HTML:

<div class="pageTitle">
    <div class="backArrow">
        <a href="index.php">
            <img src="http://s27.postimg.org/5iv71nvkf/backward_Arrow.png" width="29" height="29" />
        </a>
    </div>
    Page Title
</div>

Answer 1

你可以这样做:

http://jsfiddle.net/gjL4z/6/

.backArrow {
    float: left;    
    position:absolute;
    height:100%;
    top:0;
}
.backArrow a{
    display: block;
    height:100%;
    text-align: center;
    font: 0/0 a;
}

.backArrow a:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.backArrow a img{
    vertical-align: middle;
    display: inline-block;
}

---

这是基于 2 个 inline-block 元素可以使用 vertical-align: middle 垂直对齐的想法。

我们在这里做的是:

• 我们将 a 元素设为高度设置为 100% 的 display:block，这样下面添加的元素将采用栏的全高。

• 我们创建一个 inline-block 伪元素作为父元素的第一个子元素，并将其高度设置为 100%。

• 我们添加 vertical-align: middle 使 inline(-block) 元素保持在容器的垂直中间。我们将该 CSS 添加到添加的伪元素和我们的元素(图像)中。

• 我们通过 font-size: 0; 将父级的字体大小设置为零，以删除内联( block )元素之间的空白字符。

此方法跨浏览器并且响应