垂直与绝对定位对齐 [英] Vertical Align with Absolute Positioning
本文介绍了垂直与绝对定位对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面的代码中，我试图使绿色div.middle元素中的元素与中间元素垂直对齐。
我试过table-cell方法，但不能得到它的工作。我听说这是由于绝对定位和尝试这个解决方案没有运气：
CSS - 垂直对齐表格单元格不适用于位置绝对
这似乎是由于.table-cell没有高度 - 我想它的高度等于其父容器，其高度不同。
jsfiddle：
有没有人知道一种让绿色div.middle元素与中间垂直对齐的方法？任何方法都会做。它只需要能够处理其可变高度。可能只是css？还是我要用一点jQuery？
编辑：
box-align也不是一个可行的解决方案，由于浏览器支持和替换为新的标准。
CSS
html，body {height：100％; margin：0}
#sidebar {
width：22em;
position：fixed;
top：0;
bottom：0;
left：0;
z-index：2;
color：#ffffff;
background-color：＃333333;
overflow：auto;
height：100％;
}
#sidebar .nav {
width：3em;
float：right;
background-color：＃2e2e2e;
border-left：2px groove＃454545;
height：100％;
position：relative;
min-height：34em;
}
#sidebar .content {
height：100％;
width：16.875em; / * 17-（2/16） - 20em - .nav-nav border * /
float：left;
position：relative;
min-height：34em;
}
#sidebar .top {
position：absolute;
top：0;
}
#sidebar .bottom {
position：absolute;
bottom：0;
}
#sidebar .middle {
position：absolute;
bottom：12em; / * 3.125 * 3 * /
top：16em; / * 3.125 * 4 * /
background：green;
}
.content .middle {
overflow：auto;
}
#sidebar .content> div {width：16.875em; } /*.top .middle .bottom * /
#sidebar .nav> div {width：3em; } /*.top .middle .bottom * /
/ * table-cell try get vertical-align working * /
#sidebar .table-cell {display：table -细胞; vertical-align：middle; }
#sidebar .content p，#sidebar .content li，#sidebar .content img {font-size：.75em; color：#dddddd;}
#sidebar ul {margin：0; padding：0;}
#sidebar .nav li {
padding：.5625em;
list-style：none;
}
#sidebar .nav li img {
height：1.875em;
width：1.875em
}
#sidebar .nav .top li {border-bottom：2px groove＃454545}
#sidebar .nav .bottom li { border-top：2px groove＃454545}
.content li {
position：relative;
display：block;
background-color：＃444;
padding：.72em;
border-radius：.8em;
border-bottom：1px solid＃292929;
border-top：1px solid＃4c4c4c;
text-align：center;
font-size：1em;
字母间距：.1em;
font-weight：normal;
height：1.2em;
}
.content li：after {
content：;
position：absolute;
display：block;
width：0;
top：.11em; / *控制垂直位置* /
right： - 。852em; / * value = - border-left-width - border-right-width * /
border-style：solid;
border-width：1.2em 0 1.2em 1.2em;
border-color：transparent＃444;
}
.content .top li {margin：.95em 0 1.9em 0;}
.content .bottom li {margin：1.9em 0 .95em 0;}
.content .logo {
text-align：center;
padding：1em 0 2em 0;
width：100％;
border-bottom：2px groove＃454545;
}
.content p.welcome {
text-align：center;
line-height：1.5em;
margin：1em 0;
}
HTML
< div id =sidebar>
< div class =nav>
< div class =top>
< ul>
< li>< img src =_ images / attributes / attribute2.svg>< / li>
< li>< img src =_ images / attributes / attribute2.svg>< / li>
< li>< img src =_ images / attributes / attribute2.svg>< / li>
< li>< img src =_ images / attributes / attribute2.svg>< / li>
< / ul>
< / div>
< div class =middle>< div class =table-cell>< p> test< / p>< / div>< / div>
< div class =bottom>
< ul>
< li>< img src =_ images / attributes / attribute2.svg>< / li>
< li>< img src =_ images / attributes / attribute2.svg>< / li>
< li>< img src =_ images / attributes / attribute2.svg>< / li>
< / ul>
< / div>
< / div>
< div class =content>
< div class =top>
< ul>
< li> SIDEBAR LINK< / li>
< li> SIDEBAR LINK< / li>
< li> SIDEBAR LINK< / li>
< li> SIDEBAR LINK< / li>
< / ul>
< / div>
< div class =middle>< div class =table-cell>
< div class =logo>< img src =_ images / g.svg>< / div>
< p class =welcome> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Mauris dictum tellus viverra neque bibendum in mattis ante dignissim。 Nam mattis feugiat lorem porttitor adipiscing。 Aliquam erat volutpat。 Nunc feugiat magna vitae mauris egestas euismod。在hac habitasse板岩dictumst。 Praesent magna sem，malesuada non fermentum vel，luctus quis mauris。 Duis quam purus，ornar vitae elefend sed，malesuada eget libero。 Phasellus sed lorem risus，nec placerat urna。在magna turpis，accumsan ac egestas quis，dictum vel massa。 Nulla vitae magna arcu。 Maecenas坐在amet前庭urna。 Integer feugiat dignissim leo sed ornare。 Maecenas auctor ultricies dui，pulvinar tincidunt velit feugiat quis。 Sed egestas ornare elit，et fringilla quam viverra ut。< / p>
< / div>< / div>
< div class =bottom>
< ul>
< li> SIDEBAR LINK< / li>
< li> SIDEBAR LINK< / li>
< li> SIDEBAR LINK< / li>
< / ul>
< / div>
< / div>
< / div>
解决方案
display：table 和 height：100％到 .table-cell / p>
所以html结构将是：
< div class = middle>
< div class =table>
< div class =table-cell>
< p>测试< / p>
< / div>
< / div>
< / div>
添加此样式：
#sidebar .table {
display：table;
height：100％;
}
In the following code I'm trying to make the elements within the green div.middle elements to vertically align to the middle.
I've tried the table-cell approach but cant get it working. I heard it's due to absolute positioning and tried this solution with no luck: CSS - Vertical align table-cell don't work with position absolute
This appears to be due to .table-cell having no height - I would like it's height to equal its parent container, which varies in height.
jsfiddle:
Does anyone know a way of getting the green div.middle elements to vertically align to the middle? Any method will do. It just needs to be capable of handling its variable height. Is it possible with just css? Or will I have to jump in with a bit of jQuery?
Edit:
box-align also isn't a viable solution due to browser support and being replaced with new standard.
CSS
html,body{height:100%;margin:0}
#sidebar {
width: 22em;
position:fixed;
top: 0;
bottom: 0;
left: 0;
z-index:2;
color: #ffffff;
background-color: #333333;
overflow:auto;
height: 100%;
}
#sidebar .nav {
width: 3em;
float: right;
background-color: #2e2e2e;
border-left: 2px groove #454545;
height: 100%;
position:relative;
min-height:34em;
}
#sidebar .content {
height: 100%;
width: 16.875em; /* 17-(2/16) - 20em - .nav - nav border*/
float:left;
position:relative;
min-height:34em;
}
#sidebar .top {
position:absolute;
top:0;
}
#sidebar .bottom {
position:absolute;
bottom:0;
}
#sidebar .middle {
position: absolute;
bottom: 12em; /* 3.125*3 */
top: 16em; /* 3.125*4 */
background: green;
}
.content .middle {
overflow:auto;
}
#sidebar .content > div {width: 16.875em; } /*.top .middle .bottom*/
#sidebar .nav > div {width:3em; } /*.top .middle .bottom*/
/*table-cell trying get vertical-align working*/
#sidebar .table-cell {display:table-cell; vertical-align: middle; }
#sidebar .content p, #sidebar .content li, #sidebar .content img {font-size: .75em; color: #dddddd;}
#sidebar ul {margin:0; padding: 0;}
#sidebar .nav li {
padding: .5625em;
list-style:none;
}
#sidebar .nav li img {
height: 1.875em;
width: 1.875em
}
#sidebar .nav .top li { border-bottom: 2px groove #454545 }
#sidebar .nav .bottom li { border-top: 2px groove #454545 }
.content li {
position:relative;
display:block;
background-color: #444;
padding: .72em;
border-radius: .8em;
border-bottom: 1px solid #292929;
border-top: 1px solid #4c4c4c;
text-align: center;
font-size: 1em;
letter-spacing: .1em;
font-weight: normal;
height: 1.2em;
}
.content li:after {
content:"";
position:absolute;
display:block;
width:0;
top:.11em; /* controls vertical position */
right:-.852em; /* value = - border-left-width - border-right-width */
border-style:solid;
border-width:1.2em 0 1.2em 1.2em;
border-color:transparent #444;
}
.content .top li{margin: .95em 0 1.9em 0;}
.content .bottom li{margin: 1.9em 0 .95em 0;}
.content .logo {
text-align: center;
padding: 1em 0 2em 0;
width: 100%;
border-bottom: 2px groove #454545;
}
.content p.welcome {
text-align: center;
line-height: 1.5em;
margin: 1em 0;
}
HTML
<div id="sidebar">
<div class="nav">
<div class="top">
<ul>
<li><img src="_images/attributes/attribute2.svg"></li>
<li><img src="_images/attributes/attribute2.svg"></li>
<li><img src="_images/attributes/attribute2.svg"></li>
<li><img src="_images/attributes/attribute2.svg"></li>
</ul>
</div>
<div class="middle"><div class="table-cell"><p>test</p></div></div>
<div class="bottom">
<ul>
<li><img src="_images/attributes/attribute2.svg"></li>
<li><img src="_images/attributes/attribute2.svg"></li>
<li><img src="_images/attributes/attribute2.svg"></li>
</ul>
</div>
</div>
<div class="content">
<div class="top">
<ul>
<li>SIDEBAR LINK</li>
<li>SIDEBAR LINK</li>
<li>SIDEBAR LINK</li>
<li>SIDEBAR LINK</li>
</ul>
</div>
<div class="middle"><div class="table-cell">
<div class="logo"><img src="_images/g.svg"></div>
<p class="welcome">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum tellus viverra neque bibendum in mattis ante dignissim. Nam mattis feugiat lorem porttitor adipiscing. Aliquam erat volutpat. Nunc feugiat magna vitae mauris egestas euismod. In hac habitasse platea dictumst. Praesent magna sem, malesuada non fermentum vel, luctus quis mauris. Duis quam purus, ornare vitae eleifend sed, malesuada eget libero. Phasellus sed lorem risus, nec placerat urna. In magna turpis, accumsan ac egestas quis, dictum vel massa. Nulla vitae magna arcu. Maecenas sit amet vestibulum urna. Integer feugiat dignissim leo sed ornare. Maecenas auctor ultricies dui, pulvinar tincidunt velit feugiat quis. Sed egestas ornare elit, et fringilla quam viverra ut.</p>
</div></div>
<div class="bottom">
<ul>
<li>SIDEBAR LINK</li>
<li>SIDEBAR LINK</li>
<li>SIDEBAR LINK</li>
</ul>
</div>
</div>
</div>
解决方案
add a parent div with display:table and height:100% to .table-cell will fix this
So the html structure wil be :
<div class="middle">
<div class="table">
<div class="table-cell">
<p>test</p>
</div>
</div>
</div>
add this Style:
#sidebar .table{
display:table;
height:100%;
}
See jsfiddle I have modified
这篇关于垂直与绝对定位对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
