Question

我在我的代码中添加了一个按钮，我想让它透明，但是它在顶部留下了巨大的空隙，我希望按钮放在中间，但我真的不知道如何做到这一点。

以下是一些图片示例 https://i.gyazo.com/3b6d5f86f5a6ec84ca61e499b2411079.jpg[ ^]

https://i.gyazo.com/d086228702c62d79bf5fdeb518089c7e.jpg[ ^] 正如您在此图片中看到的，我将背景颜色更改为透明为什么它会在顶部形成巨大的差距？按钮仍然存在，但由于它的白色背景，我无法看到它，我想将按钮向下移动到中间

                }
                    button {
                    background-color: Transparent;
                    background-repeat:no-repeat;
                    cursor:pointer;
                    overflow: hidden;
                    outline:none;
                    height:  38px;
                    line-height:  40px;
                    border:  2px solid white;
                    display:  inline-block;
                    float:  none;
                    text-align:  center;
                    width:  120px;
                    padding:  0px!important;
                    font-size:  14px;
                    color:  #fff;
                 }

                button:hover  {
                     color:  #fff;
                     background:  rgba(255, 255, 255, 0.2);
                 }







/*Menu CSS*/

            #sidebar {
                background: #151718;
                width: 200px;
                height: 17%;
                display: block;
                position: absolute;
                left: -200px;
                top: 0px;
                transition: left 0.3s linear;
                z-index: 1000;
            }

                #sidebar.visible {
                    left: 0px;
                    transition: left 0.3s linear;
                }

            ul {
                margin: 0;
                padding: 0;
            }

                ul li {
                    list-style: none;
                }

                    ul li a {
                        background: #1C1E1F;
                        color: #ccc;
                        border-bottom: 1px solid #111;
                        display: block;
                        width: 180px;
                        padding: 10px;
                        text-decoration: none;
                    }

            #sidebar-btn {
                display: inline-block;
                vertical-align: middle;
                width: 20px;
                height: 150px;
                cursor: pointer;
                margin: 20px;
                position: absolute;
                top:0px;
                right:-60px;
            }

                #sidebar-btn span {
                    height: 1px;
                    background:#ffffff;
                    margin-bottom: 5px;
                    display: block;
                }

                    #sidebar-btn span:nth-child(2) {
                        width: 75%;
                    }

                    #sidebar-btn span:nth-child(3) {
                        width: 50%;
                    }



/*Menu CSS*/




    </style>
</head>
<body>
    <div id="sidebar">

        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="servicesPage.html">Services</a></li>
            <li><a href="aboutPage.html">About</a></li>
            <li><a href="aboutPage.html">Contact</a></li>
        </ul>


    <div id="sidebar-btn">
        <span></span>
        <span></span>
        <span></span>
    </div>




    </div>


<!-- Buttons for email subscriptions and stuff -->







    <!-- Full Width Responsive Slider -->

    <div class="container">
    <div style="background-color: transparent; text-align: center; padding: 10px"><button>Contact Us</button></div>
            <div class="cycle-slideshow">
            <span class="cycle-prev">〈</span>
            <span class="cycle-next">〉</span>
            <span class="cycle-pager"></span>
            <img src="images/wp5.jpg">
            <img src="images/wp6.jpg">
            <img src="images/wp7.jpg">
          </div>
        <!-- Full Width Responsive Slider -->

        </div>
    <script type="text/javascript">
    $(document).ready(function(){

        $('#sidebar-btn').click(function(){
            $('#sidebar').toggleClass('visible');

        });
    }); 
    </script>
</body>

</html>

Answer 1

请你可以加入

.button{
    position:fixed;
    top:40%
}

Answer 2

这是要实现的布局。如果你有什么不明白的地方，你可以问。

我建议尝试构建你的CSS和你的HTML。

实施例

CSS

.centering{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

}

DEMO

将按钮向下移动到中间HTML＆amp; CSS

2 个答案: