次のコードでは、緑色のdiv.middle要素内の要素を垂直方向に中央に揃えようとしています。
テーブルセルアプローチを試しましたが、機能しません。絶対位置によるものだと聞き、運が悪かったのでこの解決策を試しました: 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 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>