JSFIDDLE

Question

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

我发现如果我给pageTitle div一个相对位置和backArrow一个0的顶部我可以绕过pageTitle div的填充但我无法进一步。给予顶部或填充50％只会使情况变得更糟。

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元素设为display:block，其高度设置为100%，因此下面添加的元素将占据条形图的整个高度。
我们创建一个inline-block伪元素作为父元素的第一个子元素，并将其高度设置为100%。
我们添加vertical-align: middle，使inline(-block)元素保持在容器的垂直中间位置。我们将CSS添加到添加的伪元素和我们的元素（图像）两者中。
我们将父级的字体大小设置为零font-size: 0;，以便删除内联（-block）元素之间的空格字符。

此方法是跨浏览器和响应

Answer 2

更改.backArrow css属性，改为使用

   .backArrow { 
      top: 0;
      width: 29px;
      height:29px;
      float: left;      
    }
    .backArrow a {
      width:100%;
      height:100%;
      display: table;
    }
    .backArrow a img {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

JS小提琴：http://jsfiddle.net/gjL4z/16/

Answer 3

JSFIDDLE

在你的代码中进行这些更改 - 将table-cell添加到parent，inline-block to child并且不需要定位。你可以使用合适的宽度。

.pageTitle {
    text-align: center;
    padding: 10px;
    color: #ffffff;
    font-size: large;   
    background: #2281b5;
    display: table-cell;
    width: 1000px;
}

.backArrow {
    display:inline-block;
    width: 10%;
    float:left;
}

中心图像垂直位于向左浮动的Div内

3 个答案:

JSFIDDLE