使用<div> <a> <p></p></a> </div>在分区内水平对齐文本时出现问题

Question

我不知道为什么我遇到这个麻烦。请看截图：

我的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;添加到锚标记时，我得到了这个：

https://dl.dropbox.com/u/107533178/Screen%20shot%202012-10-21%20at%202.18.38%20PM.png

Answer 1

你可以尝试这种风格：

#tabbase *
{
  text-align:center;
  vertical-align:middle;
}

它将DIV＃tabbase的所有子项设置为水平和垂直居中。