在 CSS 中将按钮定位在图像中答案

【问题标题】：Positioning a button within an image in CSS在 CSS 中将按钮定位在图像中
【发布时间】：2015-05-31 20:36:49
【问题描述】：

我想使用 CSS 在图像中插入一个按钮；图像具有固定的宽度和高度，位于页面中心。按钮必须在不同分辨率的图像中保持静止。

【问题讨论】：

你能贴出图片的代码吗？
您能在 jsFiddle 中添加一些代码，以便我们进行处理吗？
这是链接jsfiddle.net/4sk9rvng图片的链接在标签img的src属性中谢谢

【解决方案1】：

CSS 不允许在 <img> 标记中包含其他元素。在这种情况下，我的常见做法是将您的图像和按钮放在两个包装器 <div> 元素中，它们就像一张桌子（垂直和水平居中）。 像这样；

HTML

<div class="wrapper">
  <div>
    <img src="[your image src]">
    <a class="button" href="[go to page]">Button</a>
  </div>
</div>

CSS

.wrapper{
  display: table;
  width: 100%; /* Add or remove this depending on your layout */
}
.wrapper > div{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

只要图像没有大小限制，它就应该与图像的中心齐平:)。享受吧！

编辑 ---

或者，删除<img> 标签并将其作为.wrapper 的背景图像并使用背景尺寸：封面；将其居中:)。然后你就可以很容易地控制图像的高度和宽度了。

记得也要使用供应商前缀。我有一个方便的列表 here 尽管他们在 Sass 中。

【讨论】：

不，我不确定我是否理解。这是我的代码...第一个问题是图像未居中。 jsfiddle.net/4sk9rvng/7 注：按键测试应在箭头所指处；图片应该居中；

【解决方案2】：

在您的 CSS 中：

myImage {
background-image:url('image.jpg');
background-size:cover;
}

一定要给你的按钮一个 ID

在您的 HTML 中

<button id='myImage' type='submit'>&nbsp;</button>

【讨论】：

【解决方案3】：

要将按钮放在您想要的位置，只需给它一些边距：

.wrapper button {
    margin-left:81%; margin-top:3%;
}

但我相信您希望带有背景图像的 div 永远不会大于窗口，对吧？在这种情况下，您将需要更多的 CSS：在 div 上设置 max-width 和 max-height，然后您还需要将 html 和 body 设置为固定的宽度和高度，否则为 max-width 和 max -height 不知道它们应该与什么相关。
所以，那是

html, body {width:100%; height:100%; margin:0; padding:0;}

.wrapper {
    (..)
    margin:0 auto;
    max-width:100%; max-height:100%;
}

见updated fiddle。

【讨论】：

感谢您的回答...但我不想要中间的表格..我想要图像箭头指示的表格..
我认为它不起作用，当我调整窗口大小（或更改分辨率）时......这是正确的小提琴，如果你想帮助我jsfiddle.net/4sk9rvng/7
谢谢，您已经非常接近解决方案了。但是有一个问题...尝试调整浏览器的窗口大小（变小）...
你的意思是在这种情况下你想让按钮变小？
没有，但这是s13.postimg.org/z1i7qlffr/Schermata_del_2015_06_01_22_05_26.png的效果@