logo标签列表

如何使用CSS在一个div元素内使文本居中？

htmlcsscentering
3

我想在 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;
}
1
这可能会对你有所帮助。https://dev59.com/NXA85IYBdhLWcg3wF_q0 - Bokdem
9个回答
0

您可以使用 line-height 属性：

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

小提琴

如果文本超过一行怎么办？ - j08691
然后我建议使用 display:table-cell 的解决方案。 - Alex Char
0

试试这段代码

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

演示

如果文本超过一行怎么办？ - j08691
我也想问同样的问题。如果我的文本不只是一个 p，而是两个 p，那该怎么办？ - user1142130
然后使用display:inline-table:和display:table-cell;的解决方案 - Alex Wilson
0
你可以像这样做：

jsFiddle example

在 .transparent-btn 上使用 display:inline-table; 和 vertical-align:top;。然后设置 p 的 CSS 为：
p {
    display:table-cell;
    vertical-align:middle;
}
0
添加 line-height:100px; 我已经删除了 p 标签，以确切了解它的工作原理。
演示链接：http://jsfiddle.net/9NLtB/8/ 还需要 float left 来对齐 div。
display:inline-block;
float:left;
0

解决了你的问题，请查看链接文本对齐

这是最高效的方法，只需添加两个 CSS 规则

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

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

你可以水平和垂直地对齐所有内容！只需记住将行高添加为容器高度相同，并应用垂直居中（这里您的容器高度为100px，因此使用100px行高即可！）

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>
好的，这个解决方案可行，但是如果我有多行文本怎么办？ - user1142130
是的，它可以在任何文本行中使用。尽情享用。如果您有任何疑问，请提出。 - Suresh Karia
0
p {
    line-height: 100px;
    margin: 0;
}
0
在你的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/

0
我注意到在你的例子中，有文字的按钮相比空白按钮被按压下去。我猜想这不是预期行为。 你可以在#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

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接