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>

我正在尝试让元素填满其父容器。但由于某种原因，它不会将自身对齐 - 作为容器内部/中心的整个块元素，而是将其自身向下推向右侧。无法弄清楚我做错了什么。

编辑：我忘了提到我需要填充以使文本在气泡中垂直居中。我也试过padding-top：25px;以块元素为中心仍然没有成功。

EDIT2：我添加了text-align：center，它正确地将文本居中放在a元素中，但是a元素又不是以div为中心。

Answer 1

这是Working Demo

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

Answer 2

从班级.buttonText删除填充添加line-height: 70px;，text-align: center;以使链接居中。

.buttonText {
    display: block;
    line-height: 70px;
    text-align: center;
    padding: 0; /*Change padding to 0*/
    width:  70px;
    height: 70px;
    font-size: 100%;
    text-decoration: none;
    color: white;

}

这是Fiddle

Answer 3

将文本垂直和水平居中放置在按钮的中央。

.buttonText {
    text-align: center;
    line-height: 70px;
    vertical-align:middle; 
    display: block;
    margin: auto auto;
    font-size: 100%;
    text-decoration: none;
    color: white;
}

希望这有帮助！

（编辑：将线条高度调整为按钮的高度。vertical-align:middle;将垂直居中）

Answer 4

在CSS中删除它：

.buttonText {padding: 25px;}

将其设为：

.buttonText {padding: 0;}

Answer 5

谢谢大家的建议......我终于得到了它的合作：

.buttonText {
    margin-left: -23px;
    margin-top: -23px;
    position: absolute;
    text-align: center;
    padding: 28px;
    padding-top: 50px;
    padding-bottom: 50px;
    font-size: 100%;
    text-decoration: none;
    color: white;
}

不知道为什么这个给了我这么难的时间......在做这样的按钮时我通常没有问题。

HTML5 CSS3 <a> element not centering inside of <div> element</div></a>

5 个答案:

在CSS中删除它：