关于html：如何在div中垂直对齐文本？


How do I vertically align text in a div?

我正在尝试找到最有效的方法来将文本与一个分区对齐。我尝试过一些方法，但没有一个有效。

1
2
3
4
5
6
7
8
9
10
11
12
.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia,"Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}
1
2
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

相关讨论

CSS中的垂直居中
http://www.jakspatweb.cz/css/css-vertical-center-solution.html

文章摘要：

对于CSS2浏览器，可以使用display:table/display:table-cell将内容居中。

示例也可在jsfiddle获得：

1
div { border:1px solid green;}
1
      everything is vertically centered in modern IE8+ and others.

通过使用#隐藏新浏览器的样式，可以将旧浏览器(ie6/7)的黑客合并为样式：

1
div { border:1px solid green;}
1
2
3
4
  <div style=
   "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
   
      everything is vertically centered

相关讨论

您需要添加line-height属性，该属性必须与div的高度匹配。在你的情况下：

4

1
  A single line.

实际上，您可以完全删除height属性。

不过，这只适用于一行文本，所以要小心。

相关讨论

更新-这里有一个很好的资源

http://howtocenterincss.com/

Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation.

更新-使用flexbox

在保持这篇文章与最新的技术保持同步的同时，这里有一个更简单的方法，可以使用flexbox使一些东西居中。IE9 and lower不支持flexbox。

这里有一些很好的资源：

  • flexbox指南
  • 带flexbox的定心元件
  • IE10 FlexBox语法
  • 挠性箱支架

js修改浏览器前缀

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<ul>

   
<li>

        <p>
Some Text
</p>
   
</li>

   
<li>

        <p>
A bit more text that goes on 2 lines
</p>
   
</li>

   
<li>

        <p>
Even more text that demonstrates how lines can span multiple lines
</p>
   
</li>


</ul>

CSS

1
2
3
4
5
6
li {
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

更新-另一个解决方案

这是从零六分之三开始的，你可以用6行CSS将任何东西居中

IE8 and lower中不支持此方法

杰西德

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<ul>

   
<li>

        <p>
Some Text
</p>
   
</li>

   
<li>

        <p>
A bit more text that goes on 2 lines
</p>
   
</li>

   
<li>

        <p>
Even more text that demonstrates how lines can span multiple lines
</p>
   
</li>


</ul>

CSS

1
2
3
4
5
6
7
8
p {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

先前的答案

简单和跨浏览器的方法，很有用，因为标记的答案中的链接稍微过时了。

How to vertically and horizontally center text in both an unordered list and a div without resorting to JavaScript or css line heights. No matter how much text you have you won't have to apply any special classes to specific lists or divs (the code is the same for each). This works on all major browsers including IE9, IE8, IE7, IE6, Firefox, Chrome, Opera and Safari. There are 2 special stylesheets (1 for IE7 and another for IE6) to help them along due to their css limitations which modern browsers don't have.

andy howard-如何在无序列表或div中垂直和水平居中文本

编辑：由于我不太关心IE7/6在上一个项目中的应用，所以我使用了一个稍微精简的版本(即删除了IE7和6中使其工作的内容)。可能对其他人有用…

杰西德

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<ul>

   
<li>

       
         
           
                <p>
<!-- Content -->
</p>
           
         
       
   
</li>

   
<li>

       
         
           
                <p>
<!-- Content -->
</p>
           
         
       
   
</li>


</ul>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.outerContainer {
    display: table;
    width: 100px; /* width of parent */
    height: 100px; /* height of parent */
    overflow: hidden;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
li {
    background: #ddd;
    width: 100px;
    height: 100px;
}
相关讨论

使用display: flex很容易。使用以下方法，div中的文本将垂直居中：

1
2
3
4
5
6
7
8
div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}
1
  Your text here.

如果你愿意，水平：

1
2
3
4
5
6
7
8
9
div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}
1
  Your text here.

您必须看到所需的浏览器版本；在旧版本中，代码不起作用。

相关讨论

我使用以下方法可以轻松地将随机元素垂直居中：

HTML：

1
    This is vertically aligned text within a div

CSS：

1
2
3
4
5
6
#mytext {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

这会将我的div中的文本集中到200px高的外部div的垂直中间。请注意，您可能需要使用浏览器前缀(在我的例子中，比如-webkit-)来使您的浏览器能够正常工作。

这不仅适用于文本，也适用于其他元素。

相关讨论

您可以通过将显示设置为"表格单元格"并应用垂直对齐：中间；

1
2
3
4
    {
        display:table-cell;
        vertical-align:middle;
    }

但是，根据我未经许可从http://www.w3schools.com/cssref/pr_class_display.asp复制的摘录，并非所有版本的Internet Explorer都支持此功能。

注意：IE7及更早版本不支持值"inline table"、"table"、"table"、"table caption"、"table cell"、"table column"、"table column group"、"table row"、"table row group"和"inherit"。IE8需要一个！DOCTYPE。IE9支持这些值。

下表还显示了http://www.w3schools.com/cssref/pr_class_display.asp中允许的显示值。我希望这有帮助

enter image description here

相关讨论

UPD：这几天(我们不再需要IE6-7-8)我只需要使用css display:table来解决这个问题(或display:flex)

表：

1
2
3
4
5
6
7
8
9
10
11
12
.vcenter{
    display: table;
    background:#eee;
    width: 150px;
    height: 150px;
    text-align: center;
}
   
.vcenter :first-child {
    display: table-cell;
    vertical-align: middle;
}
1
2
3
  <p>
This is my Text
</p>

弯曲：

1
2
3
4
5
6
7
.vcenter{
    display: flex; /* <-- here */
    background:#eee;
    width: 150px;
    height: 150px; /* <-- here */
    align-items: center; /* <-- here */
}
1
2
3
  <p>
This is my Text
</p>

这是(实际上是)我对此问题最喜欢的解决方案(简单且非常支持浏览器)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div{
    margin:5px;
    text-align:center;
    display:inline-block;
}

.vcenter{
    background:#eee;
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content:"";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}
   
.vcenter :first-child {
    display:inline-block;
    vertical-align:middle;
    max-width: 99.999%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <p>
This is my Text
</p>


  <h4>This is my Text<br />Text<br />Text</h4>


 
   <p>
This is my
</p>
   <p>
Text
</p>

相关讨论

这里有一个最适合一行文本的解决方案。

如果知道行数，它还可以对多行文本进行一些调整。

1
2
3
4
5
6
7
8
9
.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*/
}

这是一把J提琴

您可以使用flexbox在一个DIV中垂直对齐中心文本。

1
2
3
4
5
6
7
8
   <p class="testimonialText"> This is the testimonial text.
</p>


div {
   display: flex;
   align-items: center;
}

您可以通过此链接了解更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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>
   
      <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
   
  </body>
</html>
相关讨论

检查这个简单的解决方案：

HTML

1
I'm a vertically centered element

CSS

1
2
3
4
5
6
7
8
9
10
11
12
.block-title {
    float:left;
    display:block;
    width:100%;
    height:88px
}

.block-title h3 {
   display:table-cell;
   vertical-align:middle;
   height:inherit
}

杰西德

没有一个答案能帮助我，试试这个，添加父分区：

1
2
display:flex;
align-items:center;

有一种更简单的方法可以在不使用表格/表格单元格的情况下垂直对齐内容：

http://jsfiddle.net/bbw5w/1/

在其中，我添加了一个不可见(宽度=0)的DIV，它假定容器的整个高度。

它似乎在IE和FF(最新版本)中工作，没有与其他浏览器进行检查。

1
         everything is vertically centered in modern IE8+ and others.

当然还有CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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%;    
}

这是我找到的最干净的解决方案(IE9+)，并通过使用其他答案省略的transform-style为"off by.5 pixel"问题添加了一个修正。

1
2
3
4
5
6
7
8
9
10
11
12
13
.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%);    
}

来源：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

对不知道值元素的简单解决方案

HTML

1
        whatever

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.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%);
}

网格项上的自动边距。与flexbox类似，在网格项上应用自动边距会使其在两个轴上居中。

1
2
3
4
5
6
.container{
  display: grid;
}
.element{
  margin: auto;
}

根据AdamTomat的答案，准备了一个jsFiddle示例来对齐DIV中的文本。

1
    text<br/>in the block

按使用显示：在CSS中灵活

1
2
3
4
5
6
7
.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* vertically   */
    justify-content: flex-end; /* horisontally */
    text-align: right;         /* addition: for text's lines */
}

还有一个例子，在博客中很少有解释。

1
2
3
4
5
6
7
8
9
10
11
12
13
  h1{
  margin:0;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}
1
            vertical align text

使用这个技巧，如果您不想使任何东西居中，可以将其对齐，添加"Left:0"以左对齐。

HTML

1
2
3
4
5
6
7
<!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
   
       
           
                Vertical contents goes here

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 .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和IE都很有效：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}
1
Active Tasks

与仅适用于Chrome的产品相比：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}
1
<span style="    margin: auto;">Active Tasks</span>

工程罚款

HTML

1
2
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>

萨斯

1
2
3
4
5
6
7
8
9
10
11
.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

不带和带图像标签(字体)

使用CSS网格为我做了这件事。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}


 
    Content

这是使用CSS中的calc()的div模式中div的另一个变体。

4

这是可行的，因为：

  • 用于在div内精确放置div的position:absolute。
  • 我们知道内部div的高度，因为我们将其设置为20px。
  • calc(50% - 10px)为50%—内部div居中高度的一半
相关讨论

嗯，显然有很多方法可以解决这个问题。

但我有一个绝对定位的，height:100%(实际上，top:0;bottom:0和固定宽度)和display:table-cell只是不能垂直居中文本。我的解决方案确实需要一个内部跨度元素，但我看到许多其他的解决方案也需要，所以我不妨添加它：

我的容器是一个.label，我希望数字垂直居中。我完全定位在top:50%和设置line-height:0来完成。

1
<span>1.</span>

CSS如下：

1
2
3
4
5
6
7
8
9
10
11
12
.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

请参阅：http://jsfiddle.net/jcward/7gmlx/

相关讨论

尝试嵌入表元素。

1
2
3
4
5
    <table style='width:200px; height:100px;'>
        <td style='vertical-align:middle;'>
            copenhagen
        </td>
    </table>
相关讨论

在Div的中心有几个显示内容/图像的技巧。有些答案非常好，我也完全同意。

CSS中的绝对水平和垂直居中

http://www.css-jquery-design.com/2013/12/css-technologies-absolute-horizontal-and-vertical-centering-in-css/

有10种以上的技术和例子。现在由你决定你喜欢哪个。

毫无疑问，display:table; display:table-Cell是一个更好的技巧。

以下是一些好技巧：

技巧1-使用display:table; display:table-Cell。

HTML

1
        CONTENT

货物积载与系固安全操作规则

1
2
3
4
5
6
7
8
9
.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

1
     CONTENT

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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 IE9+ */
}

技巧3-使用position:relative;position:absolute

1
2
3
4
5
    <h4>ABSOLUTE CENTER,
WITHIN CONTAINER.</h4>
    <p>
This box is absolutely centered, horizontally and vertically, within its container
</p>

CSS：

1
2
3
.vertical {
   display: table-caption;
}

将此类添加到包含要垂直对齐的内容的元素中

如果需要与min-height属性一起使用，则必须将此css添加到：

1
2
3
4
.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}