html

您所在的位置：网站首页 › 怎么把一个div放在另一个div的底部 › html

html

#html| 来源: 网络整理| 查看: 265

tl;dr

Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child.

This solution is not going to work in IE6 & 7. Yours is the safer way to go for those. But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.

The classic solution (table layout)

This was my original answer. It still works fine and is the solution with the widest support. Table-layout will impact your rendering performance so I would suggest that you use one of the more modern solutions.

Here is an example

Tested in:

FF3.5+ FF4+ Safari 5+ Chrome 11+ IE9+

HTML

your content

CSS

.cn { display: table-cell; width: 500px; height: 500px; vertical-align: middle; text-align: center; } .inner { display: inline-block; width: 200px; height: 200px; }

Modern solution (transform)

Since transforms are fairly well supported now there is an easier way to do it.

CSS

.cn { position: relative; width: 500px; height: 500px; } .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; }

Demo

♥ my favourite modern solution (flexbox)

I started to use flexbox more and more its also well supported now Its by far the easiest way.

CSS

.cn { display: flex; justify-content: center; align-items: center; }

Demo

More examples & possibilities: Compare all the methods on one pages

【本文地址】

html

html

今日新闻

推荐新闻