一直以为 CSS 不能在垂直方向(vertical)居中,今天搜了一下,发现还是可以滴。办法如下:
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
将 display 属性设置成 table-cell,有可以有 vertical-align 属性了,可以设置的值应该有 top、middle、bottom。没试过…… 另外,不知道在 IE 里头支持如何。
将区块居中:
.block {
margin-left: auto;
margin-right: auto;
width: 6em;
display: block;
}
margin 也可以简写,margin: 0 auto;
。 这个办法其实很常用,display
属性并不一定需要设置,只是碰上 inline 的物件的时候需要,例如 span
、img
、a
等等。如下:
.block {
margin: 0 auto;
width: 6em;
}