我正在尝试找到将文本与 div 对齐的最有效方法。我已经尝试了一些东西,但似乎都没有。
.testimonialText { 位置:绝对;左:15px;顶部:15px;宽度:150px;高度:309px;垂直对齐:中间;文本对齐:居中; font-family:Georgia,“Times New Roman”,Times,serif;字体样式:斜体;填充:1em 0 1em 0; }
在现代浏览器中执行此操作的正确方法是使用 Flexbox。
有关详细信息,请参阅 this answer。
有关在旧浏览器中工作的一些旧方法,请参见下文。
CSS 中的垂直居中
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
文章摘要:
对于 CSS 2 浏览器,可以使用 display:table
/display:table-cell
将内容居中。
JSFiddle 还提供了一个示例:
div {border:1px 纯绿色;}
可以使用 #
将旧浏览器 (Internet Explorer 6/7) 的 hack 合并到样式中以隐藏新浏览器的样式:
div {border:1px 纯绿色;}
您需要添加 line-height
属性,并且该属性必须与 div
的高度匹配。在你的情况下:
.center { 高度:309px;行高:309px; /* 与高度相同! */ }
事实上,您可以完全删除 height
属性。
这仅适用于一行文本,所以要小心。
这是一个很棒的资源
从 http://howtocenterincss.com/:
在 CSS 中居中是一件令人头疼的事情。取决于各种因素,似乎有无数种方法可以做到这一点。这将合并它们并为您提供每种情况所需的代码。
使用弹性盒
为了使这篇文章与最新技术保持同步,这里有一种使用 Flexbox 将内容居中的更简单的方法。 Internet Explorer 9 及更低版本不支持 Flexbox。
这里有一些很棒的资源:
Flexbox 指南
使用 Flexbox 使元素居中
用于 Flexbox 的 Internet Explorer 10 语法
对弹性盒的支持
JSFiddle with browser prefixes
李{显示:弹性;证明内容:中心;对齐内容:居中;弹性方向:列; /* 列 | row */ }
一些文本
两行的更多文本
另一种解决方案
This is from zerosixthree and lets you center anything with six lines of CSS
Internet Explorer 8 及更低版本不支持此方法。
p { 文本对齐:居中;位置:相对;最高:50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);变换:translateY(-50%); }
一些文本
两行多一点的文本
偶数更多说明行如何跨越多行的文本
上一个答案
一种简单且跨浏览器的方法,由于标记答案中的链接有些过时,因此很有用。
如何在不使用 JavaScript 或 CSS 行高的情况下在无序列表和 div 中垂直和水平居中文本。无论您有多少文本,您都不必将任何特殊类应用于特定列表或 div(每个代码都相同)。这适用于所有主要浏览器,包括 Internet Explorer 9、Internet Explorer 8、Internet Explorer 7、Internet Explorer 6、Firefox、Chrome、Opera 和 Safari。由于现代浏览器所没有的 CSS 限制,有两个特殊的样式表(一个用于 Internet Explorer 7,另一个用于 Internet Explorer 6)来帮助他们。
Andy Howard - 如何在无序列表或 div 中垂直和水平居中文本
因为我在上一个项目中不太关心 Internet Explorer 7/6,所以我使用了一个稍微精简的版本(即删除了使它在 Internet Explorer 7 和 6 中工作的东西)。它可能对其他人有用...
.outerContainer { 显示:表;宽度:100px; /* 父级宽度 */ height: 100px; /* 父级的高度 */ overflow: hidden; } .outerContainer .innerContainer { 显示:表格单元;垂直对齐:中间;宽度:100%;边距:0 自动;文本对齐:居中; }李{背景:#ddd;宽度:100px;高度:100px; }
内容
使用 display: flex
很容易。使用以下方法,div
中的文本将垂直居中:
div {显示:-webkit-flex;显示:弯曲;对齐项目:居中; /* 更多样式:*/ 高度:300px;背景颜色:#888; }
如果你愿意,水平:
div {显示:-webkit-flex;显示:弯曲;对齐项目:居中;证明内容:中心; /* 更多样式:*/ 高度:300px;背景颜色:#888; }
您必须看到您需要的浏览器版本;在旧版本中,代码不起作用。
我使用以下方法可以轻松地将随机元素垂直居中:
HTML:
<div style="height: 200px">
<div id="mytext">This is vertically aligned text within a div</div>
</div>
CSS:
#mytext {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
这会将我的 div
中的文本居中到 200 像素高的外部 div
的确切垂直中间。请注意,您可能需要使用浏览器前缀(例如在我的情况下为 -webkit-
)才能使其适用于您的浏览器。
这不仅适用于文本,也适用于其他元素。
试试这个,添加父 div:
display: flex;
align-items: center;
您可以通过将显示设置为 'table-cell' 并应用 vertical-align: middle;
来做到这一点:
{
display: table-cell;
vertical-align: middle;
}
然而,根据我未经许可从 http://www.w3schools.com/cssref/pr_class_display.asp 复制的这段摘录,并非所有版本的 Internet Explorer 都支持这一点。
注意:值“inline-table”、“table”、“table-caption”、“table-cell”、“table-column”、“table-column-group”、“table-row”、“table-row” Internet Explorer 7 及更早版本不支持-group”和“inherit”。 Internet Explorer 8 需要一个!DOCTYPE。 Internet Explorer 9 支持这些值。
下表还显示了来自 http://www.w3schools.com/cssref/pr_class_display.asp 的允许显示值。
https://i.stack.imgur.com/c7nnr.png
这些天来(我们不再需要 Internet Explorer 6-7-8)我只会使用 CSS display: table
来解决这个问题(或 display: flex
)。
桌子:
.vcenter { 显示:表格;背景:#eee; /* 可选 */ 宽度:150px;高度:150px;文本对齐:居中; /* 可选 */ } .vcenter > :first-child { display: table-cell;垂直对齐:中间; }
这是我的文本
柔性:
.vcenter { 显示:弹性;对齐项目:居中;高度:150px;证明内容:中心; /* 可选 */ 背景:#eee; /* 可选 */ 宽度:150px; }
这是我的文字
对于旧版浏览器:
这是(实际上是)我最喜欢解决这个问题的解决方案(简单且很好的浏览器支持):
div {边距:5px;文本对齐:居中;显示:内联块; } .vcenter { 背景:#eee; /* 可选 */ 宽度:150px;高度:150px; } .vcenter:before { 内容:“”;显示:内联块;高度:100%;垂直对齐:中间;最大宽度:0.001%; /* 以防文本换行,你不应该注意到它 */ } .vcenter > :first-child { display: inline-block;垂直对齐:中间;最大宽度:99.999%; }
这是我的文字
这是我的
文本
您可以使用显示网格和放置项目中心:
.container { 宽度:200px;高度:200px;边框:纯红色;显示:网格;放置项目:中心; }
这是一个最适合单行文本的解决方案。
如果行数已知,它也可以用于多行文本,并进行一些调整。
.testimonialText {
font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
content: "";
display: block;
height: 50%;
margin-top: -0.5em; /* Half of the font size */
}
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 250px;
background: #f8f8f8;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: center;
justify-content: center;
}
p{
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
您可以使用 Flexbox 在 div 内垂直对齐中心文本。
<div>
<p class="testimonialText">This is the testimonial text.</p>
</div>
div {
display: flex;
align-items: center;
}
您可以在 A Complete Guide to Flexbox 了解更多信息。
检查这个简单的解决方案:
HTML
<div class="block-title"><h3>I'm a vertically centered element</h3></div>
CSS
.block-title {
float: left;
display: block;
width: 100%;
height: 88px
}
.block-title h3 {
display: table-cell;
vertical-align: middle;
height: inherit
}
有一种更简单的方法可以垂直对齐内容,而无需使用表格/表格单元格:
在其中我添加了一个不可见的(宽度= 0)div,它假定容器的整个高度。
它似乎适用于 Internet Explorer 和 Firefox(最新版本)。我没有检查其他浏览器
<div class="t">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
<div></div>
</div>
当然还有 CSS:
.t, .t > div:first-child
{
border: 1px solid green;
}
.t
{
height: 400px;
}
.t > div
{
display: inline-block;
vertical-align: middle
}
.t > div:last-child
{
height: 100%;
}
这是我找到的最干净的解决方案(Internet Explorer 9+),并通过使用其他答案已省略的 transform-style
添加了“off by 0.5 像素”问题的修复程序。
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
来源:Vertical align anything with just 3 lines of CSS
HTML:
<div class="col-md-2 ml-2 align-middle">
<label for="option2" id="time-label">Time</label>
</div>
CSS:
.align-middle {
margin-top: auto;
margin-bottom: auto;
}
一个不知道值的元素的简单解决方案:
HTML
<div class="main">
<div class="center">
whatever
</div>
</div>
CSS
.main {
position: relative
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
根据 Adam Tomat 的回答,准备了一个 JSFiddle example 来对齐 div 中的文本:
<div class="cells-block">
text<br/>in the block
</div>
通过在 CSS 中使用 display:flex:
.cells-block {
display: flex;
flex-flow: column;
align-items: center; /* Vertically */
justify-content: flex-end; /* Horisontally */
text-align: right; /* Addition: for text's lines */
}
在 a blog post 中有另一个 example 和一些解释。
网格项目上的自动边距。
与 Flexbox 类似,在网格项上应用边距自动使其在两个轴上居中:
.container {
display: grid;
}
.element {
margin: auto;
}
利用:
h1 {边距:0;位置:绝对;左:50%;最高:50%;变换:翻译(-50%,-50%); } .container { 高度:200px;宽度:500px;位置:相对;边框:1px 实心#eee; }
有了这个技巧,如果你不想让它居中,你可以对齐任何东西,添加“left:0”来左对齐。
使用 CSS 网格为我做到了:
.outer { 背景颜色:灰色;宽度:10rem;高度:10rem;显示:网格;对齐项目:中心; } .inner { 背景颜色:#FF8585;对齐自我:中心; }
HTML
<div class="relative"><!--used as a container-->
<!-- add content here to to make some height and width
example:<img src="" alt=""> -->
<div class="absolute">
<div class="table">
<div class="table-cell">
Vertical contents goes here
</div>
</div>
</div>
</div>
CSS
.relative {
position: relative;
}
.absolute {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
.table {
display: table;
height: 100%;
width: 100%;
text-align: center;
color: #fff;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
使用 flex,请注意浏览器渲染的差异。
这适用于 Chrome 和 Internet Explorer:
.outer { 显示:弹性;宽度:200px;高度:200px;背景颜色:#ffc; } .inner { 显示:弹性;宽度:50%;高度:50%;边距:自动;文本对齐:居中;证明内容:中心;对齐项目:居中;背景颜色:#fcc; }
与仅适用于 Chrome 的这个比较:
.outer { 显示:弹性;宽度:200px;高度:200px;背景颜色:#ffc; } .inner { 显示:弹性;宽度:50%;高度:50%;边距:自动;背景颜色:#fcc; }
这将使文本垂直居中:
.parent { display: inline-flex } .testimonialText { margin-top: auto;边距底部:自动; }
这是在 CSS 中使用 calc()
的 div
模式中 div
的另一种变体。
<div style="height:300px; border:1px solid green;">
Text in outer div.
<div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
Text in inner div.
</div>
</div>
这有效,因为:
position:absolute 用于在 div 中精确放置 div
我们知道内部 div 的高度,因为我们将其设置为 20px。
calc(50% - 10px) for 50% - 一半高度用于使内部 div 居中
这工作正常:
HTML
<div class="information">
<span>Some text</span>
<mat-icon>info_outline</mat-icon>
</div>
萨斯
.information {
display: inline-block;
padding: 4px 0;
span {
display: inline-block;
vertical-align: middle;
}
mat-icon {
vertical-align: middle;
}
}
不带和带图像标记 <mat-icon>
(它是一种字体)。
您可以使用 css flexbox
。
.testimonialText { 高度:500px;填充:1em;显示:弯曲;对齐项目:居中;证明内容:中心;边框:1px 实心#b4d2d2; }
height
;否则将无法正常工作。
嗯,显然有很多方法可以解决这个问题。
但是我有一个绝对定位的 <div>
,height:100%
(实际上是 top:0;bottom:0
和固定宽度)和 display:table-cell
只是无法垂直居中文本。我的解决方案确实需要一个内部跨度元素,但我看到许多其他解决方案也需要,所以我不妨添加它:
我的容器是 .label
,我希望数字在其中垂直居中。我通过绝对定位在 top:50%
并设置 line-height:0
来做到这一点
<div class="label"><span>1.</span></div>
CSS如下:
.label {
position:absolute;
top:0;
bottom:0;
width:30px;
}
.label>span {
position:absolute;
top:50%;
line-height:0;
}
看看它的实际效果:http://jsfiddle.net/jcward/7gMLx/
有 several tricks 在 div 的中心显示内容或图像。有些答案真的很好,我也完全同意这些。
CSS中的绝对水平和垂直居中
有超过 10 techniques with examples 个。现在由您决定您喜欢哪个。
毫无疑问,display:table; display:table-Cell
是一个更好的技巧。
一些好的技巧如下:
技巧 1 - 使用 display:table; display:table-cell
HTML
<div class="Center-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
CONTENT
</div>
</div>
</div>
CSS 代码
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
}
技巧 2 - 使用 display:inline-block
HTML
<div class="Center-Container is-Inline">
<div class="Center-Block">
CONTENT
</div>
</div>
CSS 代码
.Center-Container.is-Inline {
text-align: center;
overflow: auto;
}
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-block;
vertical-align: middle;
}
.Center-Container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}
技巧 3 - 使用 position:relative;position:absolute
<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
<div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
<h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
<p>This box is absolutely centered, horizontally and vertically, within its container</p>
</div>
</div>
aria-...
属性可以提供帮助,但这肯定就像在狗粪上喷洒空气清新剂而不是去除它。