2

在下面的代码中，我试图使绿色 div.middle 元素中的元素垂直对齐到中间。

我已经尝试过表格单元格方法，但无法正常工作。我听说这是由于绝对定位，但没有成功尝试了这个解决方案： CSS - Vertical align table-cell don't work with position absolute

这似乎是由于 .table-cell 没有高度 - 我希望它的高度等于其高度不同的父容器。

jsfiddle：

http://jsfiddle.net/q5jKM/1/

有谁知道让绿色 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 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>
4

3 回答 3

7

添加一个父 div display:table和height:100%to.table-cell将解决这个问题

所以html结构将是：

   <div class="middle">
        <div class="table">
           <div class="table-cell">
               <p>test</p>
           </div>
        </div>    
  </div>

添加此样式：

#sidebar .table{
   display:table;
   height:100%;
}

请参阅我已修改的jsfiddle

于 2013-01-25T06:47:51.743 回答
2

您可以为该表格单元格设置高度。

.table-cell{
height: 200px;/* for example */
vertical-align: middle;
display: table-cell;}

<div class="middle"><div class="table-cell"><p>test</p></div></div>
于 2013-01-23T05:18:53.030 回答
1

我以前曾经遇到过垂直对齐属性的问题。我倾向于意识到这个属性似乎更适合表格。所以我在 JSFiddle 上的代码中添加了这个，对我来说它看起来不错。你能看看这对你有用吗？

            <div class="middle">
                <table height="100%" width="100%">
                    <tr>
                        <td style="vertical-align:middle">
                            <p>test</p>
                        </td>
                    </tr>
                </table>
            </div>
于 2013-01-25T06:18:36.273 回答