Question

我无法通过移动浏览器和其他奇怪的方式将这个行高调整为垂直中心。

在Chrome和Firefox上，它工作正常并且是垂直中心。

由于某种原因，在这个小提琴中，完全相同的代码不会在chrome中对齐中心。 http://jsfiddle.net/SEOplay/D6LtM/

如果我从position:fixed; left:0; top:0;中移除#headTitle，则可以正常使用。

在Android Mobile 4.0.4上，用户代理，mozilla / 5.0它可以正常工作并且是垂直中心。

在Android Tablet 4.1.2相同的用户代理上，它不起作用，并且与小提琴类似（它们都使用相同的样式表）。

所以基本上 Chrome：是的。 Firefox：是的。 Android Mobile 4.0.4：是的。 Android平板电脑4.1.2：没有。小提琴Chrome？否

这是完整的代码：

HTML

<div id="headTitle">
    <div id="headBtn">
        <div id="hBtn"></div>
    </div>
     <h1><a href="<?php echo get_option('home'); ?>">L'ART Magazine</a></h1>
</div>

CSS

    body {
    font-size: 10px;
    line-height:1;
    overflow:hidden;
    height:100%;
    width:100%;
    /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
    div#hBtn {
        background:url('../images/icon_set.png') no-repeat -4px -53px;
        height:20px;
        width:20px;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
    }
    div#headBtn {
        position:absolute;
        width:40px;
        height:40px;
        border-right:1px solid #999;
        cursor:hand;
        cursor:pointer;
    }
    div#headTitle {
        height:40px;
        width:100%;
        text-align:center;
        background-color:#222;
        position:fixed;
        left:0;
        top:0;
        border-bottom:1px solid #ddd;
        z-index:1000;
    }
    div#headTitle a {
        color:red;
        line-height:40px;
        font-size:20px;
    }

那么SO是什么？

哦，这里也是一张图片

Answer 1

为margin: 0px;代码

提供h1

Upadetd Fiddle

我无法在一个位置垂直对齐文本和行高：固定;容器

1 个答案: