0

なぜ私がこの問題を抱えているのかわかりません。スクリーンショットを見てください：

スクリーンショット

私の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 でなぜこれが難しいのかわかりませんが、それ以外はすべて簡単です。margin、padding、border、vertical-align、そして text-align を試してみました。

なぜ機能しないのですか？

追伸: 参考になれば、<a id = "blog">タグの背景画像は次の css です:

#tabbase #blog {
   color : #000000;
   background-image : url('Tab.png');
}

スパンを使用すると、次のようになります。

スクリーンショット 2

アンカータグに追加text-align:center;すると、次のようになります。

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

4

1 に答える 1

1

このスタイルを試すことができます：

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

DIV#tabbase のすべての子を水平方向と垂直方向の両方で中央揃えに設定します。

于 2012-10-21T13:30:42.340 に答える