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

9 个答案:

答案 0 :(得分：0)

你可以这样做：

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

p {

display:table-cell;

vertical-align:middle;

}

答案 1 :(得分：0)

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

您可以使用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}}也应该出现在前缀版本之后。

答案 2 :(得分：0)

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

还需要向左浮动以对齐div

display:inline-block;

float:left;

答案 3 :(得分：0)

您可以使用line-height：

p {

display:inline-block;

vertical-align:middle;

line-height: 55px;

}

答案 4 :(得分：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;

}

答案 5 :(得分：0)

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

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

vertical-align:middle;

line-height:100px;

并删除了不必要的

代码

您可以水平和垂直对齐所有内容！只记得添加行高与容器高度相同并应用垂直对齐中间(这里你的容器高度为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

text

text

text

text

答案 6 :(得分：0)

p {

line-height: 100px;

margin: 0;

}

答案 7 :(得分：0)

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

答案 8 :(得分：0)

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

.transparent-btn {

line-height: 100px;

text-align: center;

}

span {

display: inline-block;

vertical-align: middle;

line-height: normal;

}

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