如何使用 CSS 在 div 元素中居中文本 [重复]答案

【问题标题】：How can I center text inside a div element using CSS [duplicate]如何使用 CSS 在 div 元素中居中文本 [重复]
【发布时间】：2014-09-14 18:06:40
【问题描述】：

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

http://jsfiddle.net/9NLtB/

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

【问题讨论】：

这可能会对您有所帮助。 stackoverflow.com/questions/2939914/…

标签： html css centering

【解决方案1】：

我注意到在您的示例中，与空按钮相比，带有文本的按钮被按下。我假设这不是我们想要的行为。

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

#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; 设置为display: table-cell; 后，现在可以在.transparent-btn 上运行更长时间。所以我们改用border-collapse: separate; 和border-spacing: 5px;。

您的无前缀 border-radius 和 box-shadow 也应该在前缀版本之后。

这是：JsFiddle

【讨论】：

【解决方案2】：

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

这是最高效的方法，刚刚添加了 2 个 css 规则

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

并删除了不必要的<p>标签

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

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>

【讨论】：

好的，解决方案有效，但是如果我有不止一行文本怎么办？
是的，它适用于任何文本行，享受吧。如果您有任何疑问，请询问

【解决方案3】：

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

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


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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

还需要向左浮动来对齐 div

display:inline-block;
float:left;

【讨论】：

【解决方案7】：

你可以这样做：

jsFiddle example

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

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

【讨论】：

【解决方案8】：

试试这个代码

.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

【讨论】：

文字多于一行怎么办？
我也想问同样的问题。如果我的文本是两个 p 而不是一个...
然后使用 display:inline-table: 和 display:table-cell 解决方案；

【解决方案9】：

你可以使用line-height:

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

fiddle

【讨论】：

文字多于一行怎么办？
然后我建议使用display:table-cell 解决方案。