关于html:为什么vertical-align:Middle在我的span或div上不起作用?

Why is vertical-align: middle not working on my span or div?

我正在尝试将spandiv元素在另一个div元素内垂直居中。但是,当我放vertical-align: middle时,什么也没发生。我尝试更改两个元素的display属性,但似乎没有任何效果。

这是我当前在网页上所做的事情:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
   
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
   
.second {
  border: 1px solid blue;
}
1
2
    This box should be centered in the larger box
    Another box in here

这里是实现的jsfiddle,表明它不起作用:http://jsfiddle.net/gZXWC/


这似乎是最好的方法-自我的原始帖子以来已经过去了一段时间,现在应该这样做:http://jsfiddle.net/m3ykdyds/200

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */

     This


使用CSS3:

1
 

Css:

1
2
3
4
5
.outer {
  display : flex;
  align-items : center;
  justify-content: center;
}

注意:这可能在旧版IE的

中不起作用


尝试一下,对我非常有用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;


将line-height设置为与包含div相同的高度也将起作用

演示http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

1
2
3
4
.inner {
    line-height:72px;
    border: 1px solid #000000;
}


以防您不能依赖flexbox ...将.child放在.parent \\的中心。当像素大小未知(换句话说,总是)并且IE9也没有问题时,该方法就可以使用。

1
2
3
4
5
6
7
8
9
.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}
1
 


您应该将vertical-align: middle放在内部元素上,而不是外部元素上。在外部元素上设置line-height属性以匹配外部元素的height。然后在内部元素上设置display: inline-blockline-height: normal。这样,内部元素上的文本将以正常的行高换行。适用于Chrome,Firefox,Safari和IE 8

1
2
3
4
5
6
7
8
9
10
.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
1
    Vertically centered text

小提琴


我用它来对齐包装div中心的所有内容,以防任何人使用-我发现它最简单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

1
 


这里有一个进行垂直对齐的两种方法的示例。我使用它们,它们工作得很好。一种使用绝对定位,另一种使用flexbox。

垂直对齐示例

使用flexbox,您可以使用align-selfdisplay: flex;中将一个元素本身与另一个元素对齐。如果需要水平对齐,可以在容器中使用align-itemsjustify-content

如果您不想使用flexbox,则可以使用position属性。如果将容器设为相对且内容为绝对,则内容将能够在容器内自由移动。因此,如果您在内容中使用top: 0;left: 0;,它们将位于容器的左上角。

Absolute positioning

然后,要使其对齐,只需将顶部和左侧引用更改为50%。这会将内容从内容的左上角放置在容器中心。

Align in the middle of the container

因此,您需要纠正此问题,将内容的大小向左和向左平移一半。

Absolute centered


这是一篇很好的文章,介绍了如何垂直对齐。
我喜欢浮动方式。

http://www.vanseodesign.com/css/vertical-centering/

HTML:

1
    Content here

以及相应的样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}


HTML

1
  Test Content here

CSS

1
2
3
4
5
6
7
#myparent {
  display: table;
}
#mychild {
  display: table-cell;
  vertical-align: middle;
}

我们将父div设置为显示为表格,将子div设置为显示为表格单元格。然后,我们可以在子div上使用vertical-align并将其值设置为middle。此子div内的所有内容都将垂直居中。


这是最新的最简单的解决方案-无需更改任何内容,只需将三行CSS规则添加到您要居中的div容器中即可。我爱Flex Box #LoveFlexBox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
 
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}
1
2
3
4
5
  This box should be centered in the larger box
    Another box in here
 
  This box should be centered in the larger box
    Another box in here

奖金

justify-content的值可以设置为以下几个选项:

  • flex-start,这将使子div与flex流在其父容器中开始的位置对齐。在这种情况下,它将停留在顶部。

  • center,它将子div与其父容器的中心对齐。这真的很整洁,因为您不需要添加额外的div来包裹所有子项,只需将包装器放在父容器中即可使子项居中。因此,这是真正的垂直中心(在column flex-direction中。类似地,如果将flow-direction更改为row,它将变为水平居中。

  • flex-end,它将子div与flex流在其父容器中结束的位置对齐。在这种情况下,它将移至底部。

  • space-between,它将从流的开始到流的末尾散布所有子级。如果是演示,我添加了另一个子div,以表明它们已分散。

  • space-around,类似于space-between,但流的开头和结尾有一半的空间。


很简单。只需在主类中添加display:table-cell

1
2
3
4
5
6
.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

看看这个jsfiddle!


这是一种现代方法,它利用CSS Flexbox功能。
现在,只需将这些样式添加到.main容器

中,就可以垂直对齐父容器中的内容

1
2
3
4
5
.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

你很好走!


由于vertical-aligntd上可以正常工作,因此可以将单个单元格table放在div中以对齐其内容。

1
2
3
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>

笨拙,但据我所知可以正常工作。它可能没有其他解决方法的缺点。


只需将内容放入高度为100%的表中,并设置主div的高度

1
2
3
4
5
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>

要使一个span或div元素在另一个div中垂直居中,请添加相对于父div的位置,并相对于子div绝对位置。现在,子div可以放置在div内的任何位置。铅>

1
    Vertically and horizontally centered child div

css:

1
2
3
4
5
6
7
8
9
10
11
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}