使用 <div> <a> <p> 在分区内水平对齐文本的问题答案

【问题标题】：Trouble with horizontally aligning text inside a division using <div> <a> <p>使用 <div> <a> <p> 在分区内水平对齐文本的问题
【发布时间】：2012-10-21 21:30:42
【问题描述】：

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

我的 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 中如此困难，其他一切都很容易。我试过边距、填充、边框、垂直对齐，现在是文本对齐。

为什么它不起作用？

ps：如果有帮助，<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

【问题讨论】：

为什么我的图片不显示？我上传了？对不起，让我通过我的 ftp 上传。
为什么要使用 p 标签？使用跨度。你甚至不需要 p 标签或 span 或任何东西
必须停止在所有 HTML 标记和 =.... 之间放置空格。这不是 HTML 的编写方式。如果在所有 HTML 标签之间放置空格，会让人头疼
将text-align: center 添加到a 标签。你不需要一个内部标签
好吧，让我试试。

标签： html css

【解决方案1】：

你可以试试这种风格：

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

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

【讨论】：

嗨，Mathew，* 在做什么吗？也许它是一个错字？我实际上尝试过这种方法（在 w3schools 上找到），我不确定为什么它不起作用。
“*”是通配符。这意味着它匹配所有标签。
啊，我明白了，谢谢 ^^ 它确实有效！ +1 伙计，我会将此标记为正确的，因为科里不想发布答案。为伟大的帮助干杯！有一个美好的夜晚！ :)