Question

我想在div元素（红色框）内垂直和水平地将段落元素中的文本居中。我试图使用vertical-align：middle但它不起作用。任何帮助将不胜感激，谢谢。

.transparent-btn {
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    background-color: rgba(255, 0, 0, .90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    box-shadow:0px 0px 12px #2e2300;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    border-radius:15px 15px 15px 15px;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;
    margin:5px;
    display:inline-block;
    position:relative;
}

.transparent-btn:active {
    cursor:pointer;
    position:relative;
    top:2px;
}

#wrapper {
    text-align:center;
}

p {
    display:inline-block;
    vertical-align:middle;
}

Answer 1

您可以使用line-height：

p {
        display:inline-block;
        vertical-align:middle;
        line-height: 55px;
}

fiddle

Answer 2

试试这段代码

.transparent-btn {
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    background-color: rgba(255, 0, 0, .90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    box-shadow:0px 0px 12px #2e2300;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    border-radius:15px 15px 15px 15px;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;
    margin:5px;
    display:inline-block;
    position:relative;
    vertical-align:top;
}

p {
        display:inline-block;
        vertical-align:middle;
    line-height: 50px;
}

DEMO

Answer 3

你可以这样做：

<强> jsFiddle example

在.transparent-btn上使用display:inline-table;和vertical-align:top;。然后将p的CSS设置为：

p {
    display:table-cell;
    vertical-align:middle;
}

Answer 4

添加line-height:100px;我已删除了p标记，以了解它是如何正常工作的。

小提琴：http://jsfiddle.net/9NLtB/8/

还需要向左浮动以对齐div

display:inline-block;
float:left;

Answer 5

解决了您的问题，请参阅链接Text-Aligned

这是效率最高 mehtod刚添加2 css规则

vertical-align:middle;
line-height:100px;

并删除了不必要的<p>代码

您可以水平和垂直对齐所有内容！只记得添加行高与容器高度相同并应用垂直对齐中间（这里你的容器高度为100px所以使用100px line_height简单！

CSS

 .transparent-btn {
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    background-color: rgba(255, 0, 0, .90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    box-shadow:0px 0px 12px #2e2300;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    border-radius:15px 15px 15px 15px;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;
    margin:5px;
    display:inline-block;
    position:relative;
    vertical-align:middle;
    line-height:100px;
}
.transparent-btn:active {
    cursor:pointer;
    position:relative;
    top:2px;
}
#wrapper {
    text-align:center;
}

HTML

<div id="wrapper">
<div class="transparent-btn">text</div>
<div class="transparent-btn">text</div>
<div class="transparent-btn">text</div>
<div class="transparent-btn">text</div>
</div>

Answer 6

p {
    line-height: 100px;
    margin: 0;
}

Answer 7

或使用此代码http://jsfiddle.net/9NLtB/11/

我添加了span和display:table以及display:table-cell

Answer 8

在div中添加line-height属性，然后在文本元素中将其指定为normal。

.transparent-btn {
    line-height: 100px;
    text-align: center;
}


span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

是的，这适用于多行文字：

演示：http://jsfiddle.net/9NLtB/12/

Answer 9

我注意到在你的例子中，与空文本相比，带有文本的按钮被按下了。我假设这不是理想的行为。

您可以使用display: table;上的#wrapper和display: table-cell;上的.transparent-btn

#wrapper {
    display:table;
    margin: auto;
    border-collapse: separate;
    border-spacing: 5px;
}

.transparent-btn {
    display: table-cell;
    vertical-align: middle;
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    background-color: rgba(255, 0, 0, .90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    box-shadow:0px 0px 12px #2e2300;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;
    text-align: center;
}

p {

}

现在margin: 5px;现在.transparent-btn在display: table-cell;设置为border-collapse: separate;时更长。因此，我们改为使用border-spacing: 5px;和border-radius。

此前，您的前缀box-shadow和{{1}}也应该出现在前缀版本之后。

这是：JsFiddle

如何使用CSS将文本居中在div元素中

9 个答案: