我有一个包含文本的div元素,我想将这个div的内容垂直居中对齐。
下面是我的div样式。
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
<!--结束片段-->。
什么是最好的方法?
你可以尝试这种基本方法。
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
<!--结束片段-->。
但它只适用于单行文本,因为我们将行的高度设置为与包含的盒子元素的高度相同。
这是另一种使文本垂直对齐的方法。这个方案对单行和多行文本都有效,但它仍然需要一个固定高度的容器。
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}
<div id="box">
Some text
</div>
.EXTENDER { 位置: 绝对: top: 0px; 左:0px。 下方:0px; 左:0px; 下方:0px 0px; 右:0px; 下:0px。 右:0px。 宽度: 100%; 高度: 100%; 臀部: 0px; 右边: 0px; 宽度: 100%; 高度: 100%。 100%; overflow-y: 隐藏。 溢出-x: 隐藏。 }
.PADDER-CENTER {
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
<div class="EXTENDER">
<div class="PADDER-CENTER">
<div contentEditable="true">Edit this text...</div>
</div>
</div>
<!--结束片段-->
使用[CSS+][2]构建。
1:
[2]: http://www.css.plus
你可以使用以下代码片段作为参考。 对我来说,它的工作就像一个魅力。
-- begin snippet: js hide: false console: truefalse -->
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vertically Center Text</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
display: table;
}
.centered-text {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body style="background:#3cedd5">
<div class="centered-text">
<h1>Yes, it's my landing page</h1>
<h2>Under construction, coming soon!!!</h2>
</div>
</body>
</html>
<!--结束代码段-->
以上代码片段的输出如下。
[![在此输入图片描述][1]][1] 。
[1]: https://i.stack.imgur.com/q9DkN.png [2]: https://www.codepuran.com/web-designing/vertically-horizontally-align-text-div/
另一种方式。
不要设置height
属性的div
,而是使用padding:
来实现这一效果。
与line-height类似,只有当你有一行文字时,它才会有效。
虽然这样一来,如果你的内容比较多,文字还是会居中,但是div本身会稍微大一些。
因此,与其使用
div {
height: 120px;
line-height: 120px;
}
你可以说:
div {
padding: 60px 0; // Maybe 60 minus font-size divided by two, if you want to be exact
}
这样就会将 "div "的上下 "padding "设置为 "60px",左右 "padding "为零,使 "div "高120像素(加上你的字体高度),并将文字垂直放置在div中。
这里是另一个使用flexbox的选项。
<div id="container">
<div class="child">
<span
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
nemo.</span
>
</div>
</div>
#container {
display: flex;
}
.child {
margin: auto;
}
[![在此输入图像描述][1]][1]
我'不确定是否有人走过 "写模式 "的路线,但我认为它能干净利落地解决这个问题,并且得到广泛的支持。
<!--开始片段。 js hide: false console: false babel.false --> -- begin snippet: js hide: false console: false false -->
<div class="vertical">
<div class="horizontal">
<div class="content">
I'm centered in the vertical and horizontal thing
</div>
</div>
</div>
.vertical {
//border: 1px solid green;
writing-mode: vertical-lr;
text-align: center;
height: 100%;
width: 100%;
}
.horizontal {
//border: 1px solid blue;
display: inline-block;
writing-mode: horizontal-tb;
width: 100%;
text-align: center;
}
.content {
text-align: left;
display: inline-block;
border: 1px solid #e0e0e0;
padding: .5em 1em;
border-radius: 1em;
}
<!--结束片段-->
当然,这将适用于你所需要的任何尺寸(除了100%的父尺寸)。 如果你把边框线取消注释,熟悉一下会很有帮助。
JSFiddle演示][1]给你摆弄一下。
Caniuse支持][2]。 85.22%+6.26%=91.48%(连Internet Explorer都在!)。
[1]:
[2]: http://caniuse.com/#feat=css-writing-mode这个主意更好。 你也可以这样做
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
body,
html {
height: 100%;
}
.parent {
white-space: nowrap;
height: 100%;
text-align: center;
}
.parent:after {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
.centered {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
<div class="parent">
<div class="centered">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<!--结束片段-->
满足你所有的垂直对齐需求!。
声明这个Mixin。
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
那就把它纳入你的元素。
.element{
@include vertical-align();
}
对于单行文本(或单个字符),你可以使用这种技术。
当#box
有一个非固定的、相对的高度(%)时,它可以**使用。
<div id="box"></div>
。
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
请看现场演示在JsBin(更容易编辑CSS)或[JsFiddle][2](更容易改变结果框的高度)。
如果你想把内部文本放在HTML中,而不是CSS中,那么你需要把文本内容包裹在额外的inline元素中,并编辑#box::after
以匹配它。(当然,content:
属性也应该被删除)。)
比如说
<div id="box"><span>TextContent</span></div>"。 在这种情况下,
#box::after应该被替换成
#box span`。
对于Internet Explorer 8的支持,你必须用:
替换:
。
试试变换属性。
-- begin snippet: js hide: false console: truefalse -->
#box {
height: 90px;
width: 270px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div Id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!--结束片段-->
简单而通用的方法是(如[Michielvoo'的。 表的方法][1])。)
[ctrv]{
display:table !important;
}
[ctrv] > *{ /* adressing direct discendents */
display: table-cell;
vertical-align: middle;
// text-align: center; /* optional */
}
在父标签上使用这个属性(或等价的类),即使对许多子标签也能对齐。
<parent ctrv> <ch1/> <ch2/> </parent>
[1]: https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css/8865463#8865463
一个非常简单的& 最强大的解决方案,垂直对齐中心。
<!--开始片段。 js hide: false -->
.outer-div {
height: 200px;
width: 200px;
text-align: center;
border: 1px solid #000;
}
.inner {
position: relative;
top: 50%;
transform: translateY(-50%);
color: red;
}
<div class="outer-div">
<span class="inner">No data available</span>
</div>
<!--结束片段-->