首页 \ 问答 \ 站点标题中间的PLAY按钮(CSS,HTML)(PLAY button in the middle of site header (CSS,HTML))

站点标题中间的PLAY按钮(CSS,HTML)(PLAY button in the middle of site header (CSS,HTML))

所以,我有div的这个id:

#button{
    width: 1280px;
    text-align: center;
}

#panel{
    position:absolute; 
    width: 100%; 
    text-align: center;
}

    <div id="panel">
       <img position="absolute" src="http://www.ionixpower.com/wp-content/uploads/2014/07/Grass-globe-1-1280x500.jpg">
    </div>
    <div id="button">
       <img src="http://2.firepic.org/2/images/2015-11/07/k9l53oj2fqg7.png">
    </div>

它包含一个宽度为1280像素的图像,一个标题图片。

我需要在这张图片的中间放置一个PLAY按钮,这样如果我调整浏览器窗口大小或放大或缩小它就不会离开它; 虽然此按钮需要在大多数现有分辨率中居中。

我该怎么做呢?


So, I have this id for div:

#button{
    width: 1280px;
    text-align: center;
}

#panel{
    position:absolute; 
    width: 100%; 
    text-align: center;
}

    <div id="panel">
       <img position="absolute" src="http://www.ionixpower.com/wp-content/uploads/2014/07/Grass-globe-1-1280x500.jpg">
    </div>
    <div id="button">
       <img src="http://2.firepic.org/2/images/2015-11/07/k9l53oj2fqg7.png">
    </div>

It contains an image that is 1280 pixels in width, a header picture.

I need to place a PLAY button in the middle of this picture, so that it won't go away from it if I resize the browser window or zoom in or out; though this button needs to be centered in most of existing resolutions.

How do I do this?


原文:https://stackoverflow.com/questions/33587140
更新时间:2022-02-11 08:02

最满意答案

试试这个https://jsfiddle.net/1rt9g601/2/

HTML

<div id="panel">
   <button class="play">Play button</button>
</div>

CSS

#panel {
    width: 100vw;
    height: 100vh;
    text-align: center;
    position:relative;
    background: url('http://placehold.it/1980x960');
    background-size: cover;
    background-position: center;
}

button {
    position: absolute;
    top: 50%;
    -ms-transform: translate(-35px, -20px);
    -webkit-transform: translate(-35px, -20px);
     transform:translate(-35px, -20px);
}

Try this https://jsfiddle.net/1rt9g601/2/

HTML

<div id="panel">
   <button class="play">Play button</button>
</div>

CSS

#panel {
    width: 100vw;
    height: 100vh;
    text-align: center;
    position:relative;
    background: url('http://placehold.it/1980x960');
    background-size: cover;
    background-position: center;
}

button {
    position: absolute;
    top: 50%;
    -ms-transform: translate(-35px, -20px);
    -webkit-transform: translate(-35px, -20px);
     transform:translate(-35px, -20px);
}

相关问答

更多
  • 只需将z-index值定义到您已定义位置的Header类或Id中。 它会发生,所以当你给出z-index值时,我希望它能顺利运行..... 更新的答案 我已经在头类中给出了z-index值,它的工作正常,请检查它..... HTML
    afdadfasf
    CSS .header { background-color:#ffd800; width:100%; height:42px; position:f ...
  • 什么是 Header {...} 究竟? 如果您使用的是
    标签,请将其删除,并将css标头{}替换为div.header {}并将其应用于div标签,例如
    ...
    也#00; 应该是#000; (三种颜色,不是2,因为它可以在不同的浏览器中给你有趣的结果)。 您可能还想使用位置为relative的容器元素; 设置只是为了帮助浏览器从哪里开始定位。 你可以发布一个css配合的html的工作片段吗? what is Header ...
  • 做到这一点的最好和最干净的方法是像这样使用flex : 添加display: flex到你的外部div div panel-footer [检查下面的代码] 删除浮动,并在按钮的跨度上使用text-align:right 。 [检查下面的代码] 将align-self: center添加到内部跨度。 [检查下面的代码] 对于1: .panel-footer { height: 70px; border: solid; display:flex; } 对于2: .header-foo ...
  • 正如我预料的那样,是的,这是因为整个DOM元素被压低了。 你有多个选项。 你可以把按钮放在单独的div中,并将它们float ,这样它们就不会互相影响。 更简单的解决方案是将:active按钮设置为position:relative; 并使用top而不是边距或线条高度。 示例小提琴: http : //jsfiddle.net/5CZRP/ as I expected, yeah, it's because the whole DOM element is being pushed down. You ha ...
  • 水平集中 - 无需使用Flexbox 看到这个小提琴 HTML 要使按钮集中,请使用以下CSS button{ display: block; margin:0 auto; } 水平和垂直集中使用Flexbox 看到这个小提琴 CSS body, html { height: 100%; display: -webkit-box; display: -moz-box; displ ...
  • 更新: 创建了另一个澄清示例: jsfiddle已更新 。 在下面的例子中有两种情况,第一种使用像我推荐的包装,第二种使用像你使用的位置绝对和固定高度的矩形。 在不同的视口中查看它,看看会发生什么。 HTML:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae massa eget ante tincidunt finibus. Maecenas dolor i ...

  • 这是因为你设置了overflow: hidden; 无论位置属性如何,它都会隐藏任何溢出它的容器。 将您的HTML更改为此虽然我建议将样式放入CSS文件中以使其更易于管理 。

    This is the content.

    试试这个https://jsfiddle.net/1rt9g601/2/ HTML
    CSS #panel { width: 100vw; height: 100vh; text-align: center; position:relative; background: url('http://placehold.it/1980x9 ...
  • 如果要在页面加载后重定向 if (window.addEventListener) { window.addEventListener("load", afterLoadRedirect, false); } else { window.attachEvent('onload', afterLoadRedirect); } function afterLoadRedirect(){ window.location='your url'; } If you want redirect af ...
  • 也许你可以试着用flexbox做到这一点? 将div添加到具有某些属性的按钮: .div{ display: flex; align-items: center; justify-content: center; } Maybe you could try to do that with flexbox? Add your div where you have button certain properties: .div{ display: flex; align ...

相关文章

更多

最新问答

更多
  • Apache HttpClient(4.1和更新版本):如何进行基本身份验证?(Apache HttpClient (4.1 and newer): how to do basic authentication?)
  • 复选框不适用于模态(Checkbox does not work in modal)
  • 当使用大标题无法正常工作时,iOS 11会滚动到顶部(iOS 11 scroll to top when using large titles doesn't work properly)
  • 为什么我的Arduino不能超过10?(Why can't my Arduino compare above 10?)
  • 从Lib中删除PDB文件/功能(Remove the PDB file/functionality from Lib)
  • rails-2.3.5和rack-1.0.1的来源在哪里?(Where are the sources for rails-2.3.5 and rack-1.0.1?)
  • 如何使用List <>成员不可变的类?(How to make a class with List<> member immutable?)
  • Microsoft Edge popup扩展如何获取后台页面?(Microsoft Edge popup extension how to get backgroundpage?)
  • python删除中文unicode字符串之间的空格,但不删除英文单词之间的空格(python to remove space between Chinese unicode strings but not between English words)
  • SBT:如何Dockerize一个胖罐子?(SBT: How to Dockerize a fat jar?)
  • 如何从服务器请求中保存图像的分区以便以后合并(How to save segements of image in memory from server request for merging later)
  • python这段程序中a=self.[:]是什么意思 self一般用法是啥
  • ActiveRecord :: StatementInvalid:PGError:错误:关系“指令”不存在(ActiveRecord::StatementInvalid: PGError: ERROR: relation “instructions” does not exist)
  • 虚拟机安装kail linux最低配置是多少?
  • fread()中的空字符和c中的strncpy()(Null character in fread() and strncpy() in c)
  • 从ShutdownHook中查找程序退出的原因(Find, from a ShutdownHook, why a program exits)
  • 每天在固定时间运行任务(Run a task at fixed time everyday)
  • 电脑开不了机了,开机后进了桌面,显示WINDOWS BOOT MANAGER
  • 获取字符串第n个出现的索引?(Get the index of the nth occurrence of a string?)
  • python selenium 怎么打开 Chrome 并且能设置代理,请问可以指导小弟一下吗。
  • 错误:imagecopymerge()期望参数2是资源(Error: imagecopymerge() expects parameter 2 to be resource)
  • 在我的代码中,“无法找到可安装的ISAM”错误的原因是什么?(What could be the cause of 'Could not find installable ISAM' error in my code?)
  • Access 2013 - 没有自动编号的顺序编号(Access 2013 - sequential numbering without autonumber)
  • 将带有函数的Javascript对象转换为字符串(Converting a Javascript Object with Functions into a String)
  • Java中实现封装与信息隐藏与抽象与隐藏数据的比较(Practical example Encapsulation vs Information Hiding vs Abstraction vs Data Hiding in Java)
  • 不要包必须匹配java文件所在的子目录吗?(Don't packages have to match the subdirectories the java file is in?)
  • PyCharm Python控制台中的文件路径错误(File path wrong in PyCharm Python Console)
  • 在数据框列上应用curve_fit(Apply curve_fit on dataframe columns)
  • Java中的DateTime.FromOADate()相当于什么(Java中的Datetime是Datetime的两倍)(What is the equivalent of DateTime.FromOADate() in Java (double to Datetime in Java))
  • 给定DCEL,其中双胞胎等于下一个边缘,细分可以有多少面?(Given a DCEL where the twin is equal to the next of an edge, how many faces can the subdivision have?)