Click here to Skip to main content
15,789,776 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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[^][^]
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

                    button {
                    background-color: Transparent;
                    overflow: hidden;
                    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;
                #sidebar-btn span {
                    height: 1px;
                    margin-bottom: 5px;
                    display: block;
                    #sidebar-btn span:nth-child(2) {
                        width: 75%;
                    #sidebar-btn span:nth-child(3) {
                        width: 50%;

/*Menu CSS*/

    <div id="sidebar">
            <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>

    <div id="sidebar-btn">


<!-- 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">
        <!-- Full Width Responsive Slider -->
    <script type="text/javascript">

What I have tried:

I've tried moving the code to different places and changing the colors
Updated 13-Apr-16 3:22am
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

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.

   display: flex

   display: block;
   margin: auto auto;
   height 25px; //tweak as appropriate, this is for IE11 support

<div class="flexcontainer">
   <input type="button" class="centered" value="Clicky!" />
Share this answer

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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900