0

フィドル: http://jsfiddle.net/d35QD/

div タグを使用せずにテキストを画像の中央に配置する方法を知りたいです。ナビゲーション メニューを作成していますが、各ボタンを個別の div タグ内にラップしたくありません。おそらく非常に簡単に行うことができますが、CSS :-P は初めてです。

現時点では、絶対配置を使用しています。テキストがすべてのブラウザーでまったく同じ方法で表示されていれば、これで問題ありませんが、明らかにそうではないため、別の方法が必要です。

どんな助けでも大歓迎です！ありがとう！

<div id="nav">
<ul>
    <li><a href="index.htm"><img class="navbutton" src="http://www.cawyatt.co.uk/test-top.png" alt="Website Navigation. Home Button" title="Home" /><p class="homebutton">HOME</p></a>
    </li>
</ul>
<!-- end .nav -->
</div>


ul, ol, dl {
padding:0;
margin:0;
list-style:none;
}

#nav {
background-image: url(http://www.cawyatt.co.uk/test-bottom.png);
width:120px;
height:115px;
position:relative;
}

#nav img{
height:115px;
width:120px;
}

.navbutton {
-webkit-transition:opacity 0.7s ease-in-out;
-moz-transition:opacity 0.7s ease-in-out;
-o-transition:opacity 0.7s ease-in-out;
transition:opacity 0.7s ease-in-out;
float:left;
}

a:hover img.navbutton {
opacity:0;
}

.homebutton {
position:absolute;
left:1px;
top:60px;
color:rgba(255, 255, 255, 1);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:16px;
}

編集：

以下に提案する方法は、ボタンが 1 つだけの場合は機能しますが、複数ある場合は機能しません。すべてのテキストは、最初のボタンの中央に配置されます。私が何を意味するかを示すために、別のフィドルを作成しました。

http://jsfiddle.net/3JCKB/

編集2：

助けてくれてありがとう。pタグをspanタグに変更することで修正できました。これは、スパンがインライン要素であり、pがブロックレベル要素であるため機能します:-)

ここで完成したコードを見ることができます: http://jsfiddle.net/yTACT/

また、コードをクリーンアップし、不要なクラスを削除しました。再度、感謝します！

4

3 に答える 3

0

#nav li > a > p { text-align: center; width: 100%;}

段落の幅をアンカー幅の 100% に設定し、テキストをその領域の中央に揃えます。

更新されたフィドル

于 2013-03-28T10:04:23.003 に答える
0

これを行うには、次の 2 つの適切な方法があります。

1:

.homebutton{
     position: relative;
     right: 120px //width of image
     width: 120px;
     text-align: center;
}

2:

画像を削除し、背景画像として設定します.homebutton

.homebutton{
     background: url('http://www.cawyatt.co.uk/test-top.png') no-repeat left top;
     width: 120px;
     height: 115px;
     text-align: center;
}
于 2013-03-27T13:00:47.163 に答える
0

水平方向のみに中央揃えするか、水平方向と垂直方向の両方に中央揃えするかはわかりません。とにかく、あなたはこのようにすることができます：

p{
    width: 120px; // Same width as your image
    text-align: center; // Center text horizontally
}
于 2013-03-27T13:04:33.203 に答える