Why is vertical-align: middle not working on my span or div?
我正在尝试将
这是我当前在网页上所做的事情:
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 ...将
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 |
您应该将
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,您可以使用
如果您不想使用flexbox,则可以使用position属性。如果将容器设为相对且内容为绝对,则内容将能够在容器内自由移动。因此,如果您在内容中使用
然后,要使其对齐,只需将顶部和左侧引用更改为50%。这会将内容从内容的左上角放置在容器中心。
因此,您需要纠正此问题,将内容的大小向左和向左平移一半。
这是一篇很好的文章,介绍了如何垂直对齐。
我喜欢浮动方式。
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容器中即可。我爱
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 |
奖金
-
flex-start ,这将使子div与flex流在其父容器中开始的位置对齐。在这种情况下,它将停留在顶部。 -
center ,它将子div与其父容器的中心对齐。这真的很整洁,因为您不需要添加额外的div来包裹所有子项,只需将包装器放在父容器中即可使子项居中。因此,这是真正的垂直中心(在column flex-direction 中。类似地,如果将flow-direction 更改为row ,它将变为水平居中。 -
flex-end ,它将子div与flex流在其父容器中结束的位置对齐。在这种情况下,它将移至底部。 -
space-between ,它将从流的开始到流的末尾散布所有子级。如果是演示,我添加了另一个子div,以表明它们已分散。 -
space-around ,类似于space-between ,但流的开头和结尾有一半的空间。
很简单。只需在主类中添加
1 2 3 4 5 6 | .main { height: 72px; vertical-align: middle; display:table-cell; border: 1px solid #000000; } |
看看这个jsfiddle!
这是一种现代方法,它利用CSS Flexbox功能。
现在,只需将这些样式添加到
中,就可以垂直对齐父容器中的内容
1 2 3 4 5 | .main { display: flex; flex-direction: column; justify-content: center; } |
你很好走!
由于
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; } |