使用CSS 3垂直对齐

Question

使用CSS 3垂直对齐

tho*_*tho 72 html css alignment vertical-alignment

使用CSS 3,有没有办法垂直对齐块元素？你有一个例子吗？谢谢.

Answer 1

最近正在看这个问题,并尝试过:

HTML:

<body>
    <div id="my-div"></div>
</body>

Run Code Online (Sandbox Code Playgroud)

CSS:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Run Code Online (Sandbox Code Playgroud)

这是小提琴:

http://jsfiddle.net/sTcp9/6/

在使用"width/height:auto"时,它甚至可以在固定尺寸的位置使用.测试了Firefox,Chrome和IE上的最新版本(*gasp*).

好像w3.org喜欢你的方法.他们把它放在他们的网站http://www.w3.org/Style/Examples/007/center.en.html#vertical好解决方案伙伴:) (11认同)
这种方法要非常小心.翻译元素使用GPU,最终将像素计算为浮点.因此,您最终可以以子像素值移动对象并获得模糊的结果.查看这篇文章了解更多详情:http://martinkool.com/post/27618832225/beware-of-half-pixels-in-css (9认同)
最好的解决方案.别忘了使用Modernizr的csstransforms检测:-) (3认同)

Answer 2

Cra*_*lot 34

注意:此示例使用Flexible Box布局模块的草稿版本.它已被不兼容的现代规范所取代.

通过将box-align和box-pack属性放在一起,使div框的子元素居中.

例:

div
{
width:350px;
height:100px;
border:1px solid black;

/* 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;
}

Run Code Online (Sandbox Code Playgroud)

对于任何好奇的,这在IE9中不起作用. (4认同)

Answer 3

And*_*nko 32

使用Flexbox:

.container {
    display: flex;
    /* Vertical align: */
    align-items: center;
    /* Horizontal align: */
    justify-content: center;
}

Run Code Online (Sandbox Code Playgroud)

jsFiddle:http://jsfiddle.net/maars/8Uyvf

浏览器支持:http://caniuse.com/flexbox(某些浏览器需要前缀)

Answer 4

Han*_*com 9

几种方式:

1.绝对定位 - 你需要有一个声明的高度来完成这项工作:

<div>
   <div class='center'>Hey</div>
</div>

div {height: 100%; width: 100%; position: relative}
div.center {
     width: 100px;
     height: 100px;
     top: 50%;
     margin-top: -50px;
}

Run Code Online (Sandbox Code Playgroud)

*2.使用display:table http://jsfiddle.net/B7CpL/2/*

<div>
     <img src="/img.png" />
     <div class="text">text centered with image</div>
</div>


div {
     display: table;
     vertical-align: middle
}

div img,
div.text {
     display: table-cell;
     vertical-align: middle
}

Run Code Online (Sandbox Code Playgroud)

使用display:table的更详细的教程

http://css-tricks.com/vertically-center-multi-lined-text/

Answer 5

Dav*_*ave -1

您可以通过设置要显示的元素：inline-block，然后设置vertical-align：middle;来垂直对齐；

归档时间：	14 年，10 月前
查看次数：	101549 次
最近记录：	6 年，11 月前