將按鈕向下移動到中間HTML＆CSS

-1

我在代碼中添加了一個按鈕，我想讓它透明，但隨後它在頂部產生了巨大的間隙，我希望按鈕位於中間，但我真的不知道如何去做。將按鈕向下移動到中間HTML＆CSS

下面是一些例子形象 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>

來源

2016-04-13 Vinny m. George

什麼是你實現佈局？製作按鈕到中間？ – Fiido93

您能否用您的HTML和CSS設置一個plunkr或jsfiddle> –

@FiidoFirdauz是的，那是我的目標 –

請你能在

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

來源

2016-04-13 04:41:03

這似乎並沒有工作 –

這裏補充的是佈局想要實現。如果有什麼你不明白的，你可以問。

我建議嘗試構建你的CSS和你的HTML。

例

CSS

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

}

DEMO

來源

2016-04-13 04:53:07 Fiido93

我需要按鈕在中間頁面而不是頂部，如果你知道我的意思 –

@ Vinnym.George已經更新。我的回答對你有幫助嗎？ – Fiido93

將按鈕向下移動到中間HTML＆CSS

回答

相關問題