将HTML元素与没有JavaScript的父元素的中间对齐 [英] Aligning HTML elements to the middle of the parent without JavaScript

问题描述

我要放置一个< div>在元素的中间。水平对齐很容易，当然垂直对齐可以用JS，但我相信有一个更好的方法使用CSS。是什么诀窍？

I want to place a <div> in the middle of an element. Aligning it horizontally is easy, and of course the vertical alignment can be done with JS, but I'm sure that there's a better way of doing this with CSS. What's the trick?

我需要这个应用程序与HTML5< canvas>元素，所以我不介意如果解决方案只在支持canvas和IE 7,8（当使用插件时支持画布）的浏览器中工作。

P.S. I need this for an application with the HTML5 <canvas> element, so I don't mind if the solution only works in browsers that support canvas and in IE 7,8 (which support canvas when using a plugin).

编辑：支持CSS3属性的浏览器

edit: the height (and width) of the div are resizable in browsers that support the CSS3 property resize. However, I don't mind about it too much.

> resize 。

此示例使用JS。 （Loktar - 感谢您的链接）。

this example uses JS. (Loktar - thanks for the link).

（）; c>

推荐答案

code>， display：table-cell 和 vertical-align：center http://jsfiddle.net/m5sw2/rel =nofollow>这里到中心。它会调整以适应内容，但不幸的是宽度将保持100％的容器。您可以在这里使用它

You can also use display:table, display:table-cell, and vertical-align:center like here to center. It will adjust to fit content, but unfortunately the width will remain 100% of the container. You can see it used here

这篇关于将HTML元素与没有JavaScript的父元素的中间对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！