Question

#buttoncontainer {
    position: absolute;
    top: 15%;
    left: 23%;
    width: 200px;
    height: 500px;
}

.buttons {
    position: absolute;
    display: block;
    width: 70px;
    height: 70px;
    font-family: DancingScript-Regular;
    font-size: 100%;
    padding-top: 50px;
    background-color: rgba(255,255,255,.0);
    padding: 15px 15px;
    border: 5px solid white;
    border-radius: 70px;
    box-shadow: 0px 0px 5px 5px #000000, 0 0 5px 5px #888 inset;
    left: 15%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
}

.buttonText {
    text-align: center;
    display: block;
    padding: 25px;
    width:  70px;
    height: 70px;
    font-size: 100%;
    text-decoration: none;
    color: white;
}


#b11 {
    top: 30px;
}

#b22 {
    top: 170px;
}

#b33 {
    top: 305px;
}



        <div id="buttoncontainer">
            <div class="buttons" id="b11">
                <a href="#b11" id= "b1" class="buttonText">Upload</a>
            </div>
            <div class="buttons" id="b22">
                <a href="#b22" id="b2" class="buttonText">Refresh</a>
            </div>
            <div class="buttons" id="b33">
                <a href="#b33" id="b3" class="buttonText">Logout</a>
            </div>
        </div>

I am trying to make the element fill up its parent container. But for some reason it doesn’t align itself- as a whole block element inside/center of it’s container, but instead pushes itself downwards and to the right. Can’t figure out what I am doing wrong.

EDIT: I forgot to mention that I need the padding to center the text vertically in the bubble. I also tried padding-top: 25px; an still no success on centering the a block element.

EDIT2: I added text-align: center which centers the text correctly in the a element, but again the a element is not centering inside the div.

Answer 1

Here is a Working Demo

Do this in your CSS –

.buttons { text-align: center;
    position: absolute;
    display: block;
    width: 70px;
    height: 70px;
    font-family: DancingScript-Regular;
    font-size: 100%;
    padding-top: 50px;
    background-color: rgba(255,255,255,.0);
    padding: 15px 15px;
    border: 5px solid white;
    border-radius: 70px;
    box-shadow: 0px 0px 5px 5px #000000, 0 0 5px 5px #888 inset;
    left: 15%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
}

.buttonText { /*    
    width:  70px;
    height: 70px;*/
    display: inline-block;    
    padding: 18px 0 0 0;
    font-size: 100%;
    text-decoration: none;
    color: black;
}