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

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

我有一个div，它包含1）一张图片和2）一个标签。他们现在是并排的。 当鼠标悬停在div上时，div会向右延伸，但图片的大小和位置保持不变（div的左侧）。 这将使标签显示在div的右侧（visibility设置为true，使用JS）

我的问题是我无法找到一种方法将标签居中放置在图片边缘和它所包含的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>

关于我

你看到的“左边的利润率：5%”是我能得到的最接近居中的东西，它只是没有反应

---

谢谢：）

首先，从html中去掉

标记*——这是一种不好的做法。将所有样式放入样式表中。如果需要，您可以随时添加另一个类

• 我指的是这种事情
  style=“左边距：5%；颜色：黑色

至于居中，如果您希望在标签内使文本居中，只需将

标签

css设置为

文本对齐：居中-这样可以省去一点麻烦

是否要在图像上覆盖文本，然后将div背景设置为实际图像？我看你有某种背景。如果这是你的主要背景，你可以在一个div中加一个div。然后在标签中包含以文本对齐为中心的css

如果没有一把小提琴或更多的代码，就很难准确地知道您的目标，但我希望这能有所帮助

Rachel
首先，从html中去掉
标记*——这是一种糟糕的做法。将所有样式放入样式表中。如果需要，您可以随时添加另一个类


我指的是这种事情

style=“左边距：5%；颜色：黑色


至于居中，如果您希望在标签内使文本居中，只需将
标签
css设置为
文本对齐：居中-这样可以省去一点麻烦

是否要在图像上覆盖文本，然后将div背景设置为实际图像？我看你有某种背景。如果这是你的主要背景，你可以在一个div中加一个div。然后在标签中包含以文本对齐为中心的css

如果没有一把小提琴或更多的代码，就很难准确地知道您的目标，但我希望这能有所帮助

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

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


文本对齐：居中；
剩余利润：5%
颜色：黑色；

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

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


文本对齐：居中；
剩余利润：5%
颜色：黑色；

你能提供一把小提琴吗？学习相对位置和绝对位置使用CSS背景而不是
。然后将标签放在里面，并将
左边距
和
右边距
设置为
自动
@Rav如果我将图像放在div的后面，当div扩展时，它不会随着div拉伸吗？您是否使用任何psd将其映射到html/css。我的意思是做切片工作或编写自己的html CSS是否可以提供一把小提琴？学习相对位置和绝对位置使用CSS背景而不是
。然后将标签放在里面，并将
左边距
和
右边距
设置为
自动
@Rav如果我将图像放在div的后面，当div扩展时，它不会随着div拉伸吗？您是否使用任何psd将其映射到html/css。我的意思是做切片工作或编写自己的html css