我不知道为什么我遇到了这个麻烦。请看截图:
我的 CSS 是这样的:
#tabbase {
display : inline-block;
width : 230px;
height : 173px;
border : 1px solid #3e3e3e;
background-color : #1b1b1b;
box-shadow : 0px 0px 4px 2px rgba(0, 0, 0, 0.4) inset;
margin-top : 6px;
}
#tabbase a {
display : block;
height : 43px;
text-decoration : none;
font-family : 'Nexa Bold';
font-size : 24px;
}
#tabbase a p {
text-align : center;
}
这是 html:
<div id = "tabbase">
<a id = "blog" href = "#"> <p> Blog </p> </a>
<a class = "batl" href = "#"> <p> Home </p> </a>
<a class = "batl" href = "#"> <p> Contact </p> </a>
<a class = "batl" href = "#"> <p> Samples </p> </a>
</div>
我不知道为什么这在 css 中如此困难,其他一切都很容易。我试过边距、填充、边框、垂直对齐和现在的文本对齐。
为什么它不起作用?
p.s:如果有帮助,<a id = "blog">
的背景图片标签是这个 css:
#tabbase #blog {
color : #000000;
background-image : url('Tab.png');
}
当我使用 span 我得到这个:
当我添加 text-align:center;
时到 anchor 标记我得到这个:
https://dl.dropbox.com/u/107533178/Screen%20shot%202012-10-21%20at%202.18.38%20PM.png
最佳答案
你可以尝试这种风格:
#tabbase *
{
text-align:center;
vertical-align:middle;
}
它将 DIV#tabbase 的所有子项设置为水平和垂直居中。
关于html - 使用 <div> <a> <p> 在分区内水平对齐文本时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12997255/