0

My html:

<body>
    <div id="click-here">
        <a href="...">
            <span>Click here</span>
        </a>
    </div>
    ...
</body>

My css:

html { 
    margin-top: 100px !important; 
}

#click-here { 
    height: 100px; 
    position: fixed; 
    top: 0;
    width: 100%; 
    z-index: 100000; 
}

#click-here a {
    background-image: url('...');
    display: block; 
    height: 60px; 
    width: 200px; 
    margin: 0 auto; 
    margin-top: 20px; 
    text-align: center; 
}

I want Click here to be centered inside the a element, which serves as a button. However, it is only horizontally centered. I tried vertical-align: middle on anchor, but it didn't work. I also tried setting margin-top and padding-top for span, but this is completely ignored.

Any idea what else I could try?

4

3 回答 3

1

您可以更改锚标记的行高。

#click-hear a{
    background-image: url('...');
    display: block;
    ****line-height:50px; 
    height: 60px; 
    width: 200px; 
    margin: 0 auto; 
    margin-top: 20px; 
    text-align: center; 
}

只需使用线高，直到它居中。它应该会给你想要的结果。

您也可以添加填充，但这会弄乱背景图像。

于 2013-07-30T15:20:39.613 回答
0

请参阅此 jsfiddle： http: //jsfiddle.net/PeSFh/使用display: table,display: table-cell和vertical-align: middle.

于 2013-07-30T15:31:04.270 回答
0

w3.org 的这个例子建议使用display:table-cell另外vertical-align:middle的。

我经常使用这个解决方案，它对我来说一直很好用。

于 2013-07-30T15:24:04.230 回答