Bewegen Sie den Button in die Mitte HTML & CSS

-1

Ich habe eine Schaltfläche zu meinem Code hinzugefügt, ich wollte es transparent machen, aber dann machte es eine riesige Lücke an der Spitze, und ich möchte die Schaltfläche in der Mitte platziert, aber ich habe wirklich keine Ahnung, wie es geht.Bewegen Sie den Button in die Mitte HTML & CSS

Hier sind einige Bildbeispiele https://i.gyazo.com/3b6d5f86f5a6ec84ca61e499b2411079.jpg[ ^]

https://i.gyazo.com/d086228702c62d79bf5fdeb518089c7e.jpg[ ^] , wie Sie in diesem Bild sehen kann ich die Hintergrundfarbe transparent geändert, warum es, dass riesige Lücke an der Spitze zu machen ist? Der Knopf ist immer noch da, aber da seine weißem Hintergrund kippe ich es sehe, und ich möchte die Taste gedrückt, bis in die Mitte

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

Quelle

2016-04-13 Vinny m. George

was Ihr erreichen Layout? Knopf zur Mitte machen? – Fiido93

Könnten Sie bitte ein plunkr oder jsfiddle mit Ihrem HTML und CSS einrichten> –

@FiidoFirdauz Ja, das ist das Ziel –

bewegen bitte hier in

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

Quelle

2016-04-13 04:41:03

Das schien nicht zu funktionieren –

hinzufügen kann, ist das Layout möchte erreichen. Wenn du etwas nicht verstehst, kannst du fragen.

Ich schlage vor, versuchen Sie, Ihre CSS und Ihre HTML zu konstruieren.

Beispiel

CSS

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

}

DEMO

Quelle

2016-04-13 04:53:07 Fiido93

Ich brauche den Knopf in der Mitte sein die Seite statt der Spitze, wenn Sie wissen, was ich meine –

@ Vinnym.George Bereits aktualisieren. Hat meine Antwort Ihnen geholfen? – Fiido93

Bewegen Sie den Button in die Mitte HTML & CSS

Antwort

Verwandte Themen