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

【问题标题】：How to center label between picture and edge如何在图片和边缘之间居中标签
【发布时间】：2016-09-12 04:13:47
【问题描述】：

我目前正在开发我的网站，它将在一个页面内完全使用 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>

你看到“margin-left：5%”是我能得到的最接近居中的东西，它只是没有响应。

谢谢你:)

【问题讨论】：

你能提供一个小提琴吗？
学习相对位置和绝对位置
使用带有 CSS 背景的 <div> 而不是 <img>。然后将标签放入其中并将margin-left和margin-right设置为auto。
@Rav 如果我把图像放在 div 的后面，当 div 扩展时，它不会和 div 一起拉伸吗？
您是否使用任何 psd 将其映射到 html/css。我的意思是做切片工作或编写自己的html css

标签： javascript jquery html css center

【解决方案1】：

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

我的意思是这种事情

style=" margin-left:5%; color:black; "

至于居中，如果您希望将标签内的文本居中，只需将 label css 设置为 text-align:center; - 这样会省点麻烦。

您是否应该在图像上叠加文字，然后将 div 背景设置为实际图像？我看你有某种背景。如果那是您的主要背景，您始终可以在 div 中放置一个 div。然后在其中包含带有 text-align-centered css 的标签。

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

雷切尔

【讨论】：

【解决方案2】：

为样式标签创建另一个css文件或将样式添加到头部例如

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

JSFiddle

【讨论】：