Question

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

我一直在努力摆弄它几个小时尝试一切，我只是无法将它与中心对齐并排列并排排列

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

     <!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>

Answer 1

没有master。在它们周围放置一个容器元素，并将float: center应用于那个容器元素以进行水平对齐。

在以下代码段中，我执行了此操作并将text-align: center元素定义为h1，以及其他一些设置 - ＆gt;看到最后三个CSS规则。

inline-block

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;
}

居中将按钮并排对齐页面中心

1 个答案: