How to place button in the middle HTML & CSS

Question

1.00/5 (1 vote)

See more:

So I posted a question before this which was quite simple and I managed to solve it quick, but here is another issue. I added a button to my code, I wanted to make it transparent but then it made a huge gap at the top and I want the button to eb placed in the middle but I really have no idea on how to do it.

Here are some image examples
https://i.gyazo.com/3b6d5f86f5a6ec84ca61e499b2411079.jpg[^]

https://i.gyazo.com/d086228702c62d79bf5fdeb518089c7e.jpg[^]
as you can see in this picture I changed the background color to transparent
why is it making that huge gap at the top? The button is still there but since its a white background I cant see it and I would like to move the button down to the middle

HTML

                    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>

What I have tried:

I've tried moving the code to different places and changing the colors

Posted 12-Apr-16 18:04pm

BladeLogan

Updated 13-Apr-16 2:22am

v2

Add a Solution

Comments

Sinisa Hajnal 13-Apr-16 2:26am

Either set the div in which the button is to float: left (or right) so that the page layout ignores it. Or close that div behind the images, in effect putting the button in the same container as the images. Then put the button as inline element and set the position as you see fit.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nathan Minier · Answer 1 · 2016-04-13T02:22:00

If you don't need to support IE9-, you can use a flexbox. This will avoid all the positioning hacks and allow you to flow the page naturally.

The display:block and setting the margin to auto is an old horizontal centering technique, the flexbox allows us to add a vertical margin that does the same thing.