Question

我想知道如何在不使用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/

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

Answer 1

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

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

Answer 2

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

p{
    width: 120px; // Same width as your image
    text-align: center; // Center text horizontally
}

Answer 3

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

将段落的宽度设置为锚点宽度的100％，然后将文本对齐到该区域的中心。

UPDATED FIDDLE

如何在没有单独div标签的情况下将文本居中于图像

3 个答案: