1. 首页
  2. 问答
  3. 垂直居中的div

垂直居中的div

2011-09-20 131 views
1

我意识到这里有很多例子，我从一个例子开始工作，但似乎无法让它正常工作。垂直居中的div

这里就是我有目前：

<div id="w"> 
    <div id="iw"> 
     <a href="#"> 
      <img src="http://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png" /> 
     </a> 
    </div> 
</div>

和：

body { 
    width:100%; 
    margin:0; 
    padding:0; 
} 
#w { 
    display:table; 
    width: 100%; 
} 
#iw { 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
} 
#iw a img { 
    -moz-box-shadow:0 1em 1em #444; 
    -webkit-box-shadow:0 1em 1em #444; 
    -o-box-shadow:0 1em 1em #444; 
    box-shadow:0 1em 1em #444; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    -o-border-radius:10px; 
    border-radius: 10px; 
}

（http://jsfiddle.net/rlemon/zjWaz/）

基本上我要垂直和水平居中iw容器。

我读过的想法是包装容器是display: table;，内部内容是display: table-cell;，然后您可以使用表中的垂直对齐方式。太好了，现在我该如何让桌子的页面高度达到100％？最好我能做的是固定的高度，这（不使用JS）不会帮助我完全垂直居中。

来源

2011-09-20 rlemon

+0

请不要** **刚刚发布小提琴链接到你的代码;始终将*包含在问题中。 – Matt

+0

谢谢你马特。 – rlemon

回答

5

试试下面的CSS来代替：

html,body { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
    border:1px solid #000; 
} 
#w { 
    display:table; 
    height:100%; 
    width: 100%; 
} 
#iw { 
    display:table-cell; 
    text-align:center; 
    height:100%; 
    width:100%; 
    vertical-align:middle; 
} 
#iw a img { 
    -moz-box-shadow:0 1em 1em #444; 
    -webkit-box-shadow:0 1em 1em #444; 
    -o-box-shadow:0 1em 1em #444; 
    box-shadow:0 1em 1em #444; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    -o-border-radius:10px; 
    border-radius: 10px; 
}

看到这个更新的小提琴：http://jsfiddle.net/zjWaz/1/

来源

2011-09-20 17:33:44

+0

打败我吧。当使用此技术垂直居中元素时，必须将高度：100％应用于所有包含元素。要走的路，Ujjwal！ +1 –

+0

这里要注意的重要事项是：经过测试; 'iw'元素不需要height属性。表格单元格默认会填充/假定其父表格的高度和宽度。而且我也只是将'height/width'属性应用到'body'而不是'html' ***（这是关键）*** +1检查。 – rlemon

1

，如果你知道宽度和高度更容易将定位IW绝对的，顶部：50％;左：50％，并创下负利润率的一半高度和宽度（可以说宽度/高​​度为200像素这样margin: -100px 0 0 -100px）

来源

2011-09-20 17:37:38 simoncereska

1

检查这个CSS

body { 
width:100%; 
margin:0; 
padding:0; 
} 
#w { 
display:table; 
width: 100%; 
} 
#iw { 
width:100%; 
height:100%; 
position:absolute; 
left:50%; 
top:50%; 
margin-left:-100px; 
margin-top:-50px; 
} 
#iw a img { 
-moz-box-shadow:0 1em 1em #444; 
-webkit-box-shadow:0 1em 1em #444; 
-o-box-shadow:0 1em 1em #444; 
box-shadow:0 1em 1em #444; 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
-o-border-radius:10px; 
border-radius: 10px; 
}

还要检查更新小提琴。 http://jsfiddle.net/zjWaz/4/

希望你能得到你的答案。

来源

2011-09-20 17:39:09

相关问题

 相关问题