gpt4 book ai didi

html - 在 div 中将一段文本居中

转载 作者:太空宇宙 更新时间:2023-11-04 03:31:17 25 4
gpt4 key购买 nike

我试图将一些文本放在 CSS 框的中间。我厌倦了使用 top:20px;但这感动了整个而不是文本。知道我该怎么做吗?

这是我的代码:jsfiddle

div {
background: #ff9600;
background: rgba(255, 150, 0, 0.95);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-moz-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
text-align: center;
z-index: 10;
}

<body>
<div>text</div>
</body>

最佳答案

例子1


类似于:this fiddle

它使用了以下的 css:

div {
height: 100%;
width: 100%;
background: #000;
font-size: 12px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
line-height: 80px;
}

这可能对您非常有益。 :)


例子2


一种更通用的方法是使用像 this demo 一样的 span

它使用:

   div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid #123456;
}

span {
display: inline-block;
vertical-align: middle;

line-height: normal;
}

(2) 的可能替代方案


第二个示例的一个细微变化是将 div 视为表格单元格,因此将上述 css 更改为:

div {
display: table;
width: 250px;
height: 100px;
text-align: center;
border: 1px solid red;
}

span {
display: table-cell;
vertical-align: middle;

}

因此 this 也应该适合您。

关于html - 在 div 中将一段文本居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26273776/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com