个人中心
gpt4 book ai didi

html - 居中 将按钮并排对齐到页面的中心

转载 作者：行者123 更新时间：2023-11-28 01:41:18 37 4
gpt4 key购买 nike

我试图让这两个按钮并排对齐，在页面的中心垂直和水平。

几个小时以来，我一直在摆弄它，尝试了所有方法，但我无法让它既与页面居中对齐又并排对齐

我希望有人能给我指出正确的方向。谢谢..

     <!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
        body{ margin:0; 
            font:normal 75% Arial, Helvetica, sans-serif;
            background-color:grey;} 


        canvas{ display: block; vertical-align: bottom; } 


        /* ---- particles.js container ---- */ 
        #particles-js{ position:absolute; width: 100%; 
            height: 45%; 
            background-image: url("star-sky.jpg");
            background-repeat: no-repeat; 
            background-size: cover; 
            background-position: 50% 50%; 
            z-index: -2;}


            .count-particles{
                position: absolute; 
                top: 48px; 
                left: 0; 
                width: 80px; 
                color: #13E8E9; 
                font-size: .8em; 
                text-align: left; 
                text-indent: 4px; 
                line-height: 14px; 
                padding-bottom: 2px; 
                font-family: Helvetica, Arial, sans-serif; font-weight: bold; } 


                .js-count-particles{ font-size: 1.1em; } 


                #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } 


                #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } 


                .count-particles {
                    border-radius: 0 0 3px 3px; 
                }


h1 {

    color:white;
    text-align: center;
}

button {
border-color:white;
  border-width: 2px;
    display: inline-flex;
  justify-content: center; 
  position: absolute;
  top: 45%;
  transform: translate(-50%, -50%);
  border-color:white;
  border-width: 2px;
  backdrop-filter: blur(7px);  
  -webkit-backdrop-filter: blur(7px);
}


/* add glow to button *\

    </style>
</head>
<body>
    <div>
<h1><button><a href="test.com" class="btn gitbtn">GitHub</a></button></h1>
<h1><button><a href="test.com" class="btn fillbtn">Test</a></button></h1>
<div>



<div class="particlesdiv2" id="particles-js"></div> 
<div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</div>


<script> particlesJS("particles-js", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
</script>
        </body>
</html>

最佳答案

没有float: center。在它们周围放置一个容器元素，并将 text-align: center 应用于水平对齐。

在下面的代码片段中，我将 h1 元素定义为 inline-block，加上一些其他设置 -> 请参阅最后三个 CSS 规则。

body {
  margin: 0;
  font: normal 75% Arial, Helvetica, sans-serif;
  background-color: grey;
}

canvas {
  display: block;
  vertical-align: bottom;
}


/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 45%;
  background-image: url("star-sky.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: -2;
}

.count-particles {
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles {
  font-size: 1.1em;
}

#stats,
.count-particles {
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats {
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles {
  border-radius: 0 0 3px 3px;
}

h1 {
  color: white;
  text-align: center;
}

.button-container {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

.button-container h1 {
  display: inline-block;
}

button {
  border-color: white;
  border-width: 2px;
  display: inline-flex;
  justify-content: center;
  border-color: white;
  border-width: 2px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>
  <div class="button-container">
    <h1><button><a href="test.com" class="btn gitbtn">GitHub</a></button></h1>
    <h1><button><a href="test.com" class="btn fillbtn">Test</a></button></h1>
  </div>



  <div class="particlesdiv2" id="particles-js"></div>
  <div>
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  </div>

关于html - 居中 将按钮并排对齐到页面的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50427558/

37 4 0
文章推荐： javascript - xd_soft datetimepicker 在只选择一个时间值时突出显示多个时间值
文章推荐： c++ - 在 vector 中保留插入元素的地址(C++)
文章推荐： html - Chrome 中带有负 translateZ 的悬停元素
文章推荐： c++ - 通过套接字 C++ 发送时位域值发生变化
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com