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;
}

编辑：

下面建议的方法在它只有一个按钮时有效，但在有多个按钮时无效。所有文本都以第一个按钮为中心。我创建了另一个小提琴来说明我的意思：

http://jsfiddle.net/3JCKB/

编辑2：

感谢所有的帮助。设法通过将 p 标签更改为 span 标签来修复它。这是有效的，因为 span 是一个内联元素，而 p 是一个块级元素:-)

你可以在这里看到完成的代码：http: //jsfiddle.net/yTACT/

我还清理了代码并删除了不必要的类。再次感谢！

4

3 回答 3

0

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

Sets the width of the paragraph to 100% the anchor width, then aligns text to center in that area.

UPDATED FIDDLE

于 2013-03-28T10:04:23.003 回答
0

我不确定您是只想水平居中还是水平和垂直居中。无论如何，您可以尝试这样做：

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

有两种很好的方法可以做到这一点：

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 回答