文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >gif按钮不会从中心到顶部

问gif按钮不会从中心到顶部
EN

Stack Overflow用户
提问于 2021-05-02 05:31:03
回答 2查看 55关注 0票数 0

​

代码语言：javascript
复制
/* button gifs */
.button-gifs {
  display:inline-block;
  margin-left: auto;
  margin-right: auto;
  width: 10%;
  padding: 5px;
  align:center;
  min-width: 120px;
}

/* Ion Cannon */
.earth{
    width: 150px;
    height: 150px;
    background: url(https://i.imgur.com/ubEXxDA.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.earth:hover{
    background: url(https://i.imgur.com/MDbvuYW.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}

/* dachshund head */
.dachshund-head{
    width: 150px;
    height: 150px;
    background: url(https://i.imgur.com/XDPDMXu.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.dachshund-head:hover{
    background: url(https://i.imgur.com/GICiErd.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}

/* ChickenWifRabies */
.ChickenWifRabies{
    width: 150px;
    height: 150px;
    background: url(https://i.imgur.com/wqBqdjb.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.ChickenWifRabies:hover{
    background: url(https://i.imgur.com/8H4lx1u.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}

/* Gateways */
.Gateways{
    width: 150px;
    height: 150px;
    background: url(https://i.imgur.com/kunVntT.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.Gateways:hover{
    background: url(https://i.imgur.com/7gth567.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}

/* Games */
.Games{
    width: 150px;
    height: 150px;
    background: url(https://i.imgur.com/0gwiz6c.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.Games:hover{
    background: url(https://i.imgur.com/3w29EWf.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}

/* Pride */
.Pride{
    width: 150px;
    height: 150px;
    background: url(https://i.imgur.com/ZVQmYAu.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.Pride:hover{
    background: url(https://i.imgur.com/ErHvozs.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}

/* Learning */
.Learning{
    width: 120px;
    height: 150px;
    background: url(https://i.imgur.com/1yn3nlz.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.Learning:hover{
    background: url(https://i.imgur.com/LAKluIV.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
代码语言：javascript
复制
<!-- Ion Canon -->
<div class="earth button-gifs" onclick="window.location.href='#space'" style="cursor: pointer;"></div>

<!-- Dachshund Head -->
<div class="dachshund-head button-gifs" onclick="window.location.href='#dog'" style="cursor: pointer;"> </div>

<!-- ChickenWifRabies -->
<div class="ChickenWifRabies button-gifs" onclick="window.location.href='#chickens'" style="cursor: pointer;"></div>

<!-- Gateways -->
<div class="Gateways button-gifs" onclick="window.location.href='#metal'" style="cursor: pointer;"></div>
  
  <!-- Games -->
  <div class="Games button-gifs" onclick="window.location.href='#gaming'" style="cursor: pointer;"></div>
  
    <!-- Pride -->
  <div class="Pride button-gifs" onclick="window.location.href='#pride'" style="cursor: pointer;" ></div>
  
      <!-- Learning -->
  <div class="Learning button-gifs" onclick="window.location.href='#learning'" style="cursor: pointer;"></div>
  
    <!-- Bananaman Gif -->
  <a target="_blank" href="https://www.youtube.com/embed/yModCU1OVHY">
    
  <img id="gif-2" class="button-gifs" src="https://i.imgur.com/QpylKJJ.png" 
    onmouseover="document.getElementById('gif-2').src='https://i.imgur.com/F5eUUiV.gif'" 
     onmouseout="document.getElementById('gif-2').src='https://i.imgur.com/QpylKJJ.png'" </img></a>

​

所以..。我很累，我尝试了很多不同的东西，浮动，转置，等等，似乎找不到办法让这些按钮的坐在页面的顶部和居中的。Bananaman是我第一次把它做成一个按钮，我可以把它变成和其他人一样的方式，但我已经被淹没了。我为这个网站使用的视频背景给了我一些问题，但我修复了它。我只想知道我能做些什么才能让这件事奏效。

html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-05-02 06:31:21

如果您只想对内容进行水平居中，可以添加一个简单的内容包装器div，如下所示：

​

代码语言：javascript
复制
.content {
    position: absolute;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    width: 80%;
}


/* button gifs */
.button-gifs {
  display:inline-block;
  margin-left: auto;
  margin-right: auto;
  width: 10%;
  padding: 5px;
  align:center;
  min-width: 120px;
}

/* Ion Cannon */
.earth{
    width: 150px;
    height: 150px;
    background: url(https://i.imgur.com/ubEXxDA.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.earth:hover{
    background: url(https://i.imgur.com/MDbvuYW.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}

/* dachshund head */
.dachshund-head{
    width: 150px;
    height: 150px;
    background: url(https://i.imgur.com/XDPDMXu.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.dachshund-head:hover{
    background: url(https://i.imgur.com/GICiErd.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}

/* ChickenWifRabies */
.ChickenWifRabies{
    width: 150px;
    height: 150px;
    background: url(https://i.imgur.com/wqBqdjb.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.ChickenWifRabies:hover{
    background: url(https://i.imgur.com/8H4lx1u.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}

/* Gateways */
.Gateways{
    width: 150px;
    height: 150px;
    background: url(https://i.imgur.com/kunVntT.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.Gateways:hover{
    background: url(https://i.imgur.com/7gth567.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}

/* Games */
.Games{
    width: 150px;
    height: 150px;
    background: url(https://i.imgur.com/0gwiz6c.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.Games:hover{
    background: url(https://i.imgur.com/3w29EWf.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}

/* Pride */
.Pride{
    width: 150px;
    height: 150px;
    background: url(https://i.imgur.com/ZVQmYAu.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.Pride:hover{
    background: url(https://i.imgur.com/ErHvozs.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}

/* Learning */
.Learning{
    width: 120px;
    height: 150px;
    background: url(https://i.imgur.com/1yn3nlz.png);
    background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
.Learning:hover{
    background: url(https://i.imgur.com/LAKluIV.gif);
        background-repeat: no-repeat;
    background-position: center;
  background-size: cover;
}
代码语言：javascript
复制
<div class="content">
<!-- Ion Canon -->
<div class="earth button-gifs" onclick="window.location.href='#space'" style="cursor: pointer;"></div>

<!-- Dachshund Head -->
<div class="dachshund-head button-gifs" onclick="window.location.href='#dog'" style="cursor: pointer;"> </div>

<!-- ChickenWifRabies -->
<div class="ChickenWifRabies button-gifs" onclick="window.location.href='#chickens'" style="cursor: pointer;"></div>

<!-- Gateways -->
<div class="Gateways button-gifs" onclick="window.location.href='#metal'" style="cursor: pointer;"></div>
  
  <!-- Games -->
  <div class="Games button-gifs" onclick="window.location.href='#gaming'" style="cursor: pointer;"></div>
  
    <!-- Pride -->
  <div class="Pride button-gifs" onclick="window.location.href='#pride'" style="cursor: pointer;" ></div>
  
      <!-- Learning -->
  <div class="Learning button-gifs" onclick="window.location.href='#learning'" style="cursor: pointer;"></div>
  
    <!-- Bananaman Gif -->
  <a target="_blank" href="https://www.youtube.com/embed/yModCU1OVHY">
    
  <img id="gif-2" class="button-gifs" src="https://i.imgur.com/QpylKJJ.png" 
    onmouseover="document.getElementById('gif-2').src='https://i.imgur.com/F5eUUiV.gif'" 
     onmouseout="document.getElementById('gif-2').src='https://i.imgur.com/QpylKJJ.png'" </img></a>
</div>

​

票数 0
EN

Stack Overflow用户

发布于 2021-05-02 06:27:48

将align: center更改为vertical-align: top

代码语言：javascript
复制
.button-gifs {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    width: 10%;
    padding: 5px;
    vertical-align: top;
    min-width: 120px;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67353278

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档