垂直中心文字内部位置:固定
垂直中心文字内部位置:固定
提问于 2013-07-30 15:11:43
我的html：
<body>
<div id="click-here">
<a href="...">
<span>Click here</span>
</a>
</div>
...
</body>我的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;
}我希望点击这里在a元素中居中，这是一个按钮。然而，它只是以水平为中心。我尝试了垂直对齐:中间的锚，但它没有工作。我也尝试过为span设置边距顶和填充顶，但这完全被忽略了.
知道我还能尝试什么吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-07-30 15:20:39
您可以更改锚标签的线高。
#click-hear a{
background-image: url('...');
display: block;
****line-height:50px;
height: 60px;
width: 200px;
margin: 0 auto;
margin-top: 20px;
text-align: center;
}只需玩线的高度，直到它的中心。它应该能给你想要的结果。
您也可以添加填充，但这将搞乱背景图像。
Stack Overflow用户
发布于 2013-07-30 15:24:04
来自w3.org的这个例子建议在这方面使用display:table-cell和vertical-align:middle。
我经常使用这个解决方案，它对我来说一直都很好。
Stack Overflow用户
发布于 2013-07-30 15:31:04
参见这个jsfiddle：http://jsfiddle.net/PeSFh/使用display: table、display: table-cell和vertical-align: middle。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17950816
复制相关文章
相似问题
腾讯云开发者
