Question

我目前正在开发我的网站，它将在一个页面内完全使用CSS和JS完成，完全响应。我目前陷入了一个问题，我不确定是否有办法解决。

我有一个div，包含1）图片和2）标签。它们目前是并排的。当鼠标悬停在div上时，div会向右延伸，但图片的大小和位置保持不变（div的左侧）。这样就可以在div的右侧显示标签（JS的可见性设置为true）。

我的问题是我无法找到一种方法来将图片的边缘与其所包含的div边缘之间的标签居中。

以下是一些代码：

指数。 HTML

<div class="menus1 " id = "menus1" style=" background-e:     url('../images/background1.jpg');">
<img class = "images" src = "../images/handshake.jpg" id="pen"/>
<label style=" margin-left:5%; color:black; " class="visibleLabel" id="aboutMeLabel"><b>About Me</b>    </label>
</div>

你看到＆＃34; margin-left：5％＆＃34;是我最接近中心的东西，它只是没有响应。

谢谢：）

Answer 1

首先，从你的HTML中取出<style>标签* - 这是一种不好的做法。将所有样式放入样式表中。如果需要，您可以随时添加另一个类。

我的意思是这种事情

style =“margin-left：5％; color：black;”

至于居中，如果您希望将文字置于标签中心，只需将label css设置为text-align:center; - 这样可以省去一些麻烦。

如果要覆盖图像上的文本，请将div背景设置为实际图像？我看到你有某种背景。如果这是你的主要背景，你总是可以把div放在div中。然后在其中包含带有text-align-centered css的标签。

没有小提琴或更多代码，很难确切地知道你的目标是什么，但我希望这会有所帮助。

拉结

Answer 2

为样式标记创建另一个css文件或将样式添加到head中，例如

<style>
text-align:center;
margin-left:5%
color:black;
</style>

JSFiddle

如何在图片和边缘之间居中标签

2 个答案: