html - Vertically aligned multi-line elements within div with scroll on overflow -
i'm trying vertically align set of elements (each of may multi-line) middle of div , have overflow scrolled. i'm able vertically align multi-line content via display:table , display:table-cell, seems disable overflow handling. separately, i've tried using line-height trick (setting line-height height of containing div), vertical alignment doesn't seem work multiple lines of content.
does pure css solution exist?
here's fiddle illustrates i'm trying achieve:
http://jsfiddle.net/arxoq7oq/1/ (updated)
here's html:
<body> <p>goal: vertically align middle scroll upon overflow - scenarios , b need handled same code (unlike currently):</p> <div class="frame"> scenario <div class="container green"> <div class="item-list1"> <div class="item">item 1</div> <div class="item">item 2 might wrap multiple lines</div> </div> </div> </div> <div class="frame"> scenario b <div class="container green"> <div class="item-list2"> <div class="item">item 1</div> <div class="item">item 2 might wrap multiple lines</div> <div class="item">item 3</div> <div class="item">item 4</div> <div class="item">item 5</div> <div class="item">item 6</div> <div class="item">item 7</div> </div> </div> </div> <p>can accomplish vertical alignment middle, overflow scroll doesn't work:</p> <div class="frame"> scenario <div class="container green"> <div class="item-list1"> <div class="item">item 1</div> <div class="item">item 2 might wrap multiple lines</div> </div> </div> </div> <div class="frame"> scenario b <div class="container red"> <div class="item-list1"> <div class="item">item 1</div> <div class="item">item 2 might wrap multiple lines</div> <div class="item">item 3</div> <div class="item">item 4</div> <div class="item">item 5</div> <div class="item">item 6</div> <div class="item">item 7</div> </div> </div> </div> <p>can accomplish overflow scroll, vertical alignment middle doesn't work:</p> <div class="frame"> scenario <div class="container red"> <div class="item-list2"> <div class="item">item 1</div> <div class="item">item 2 might wrap multiple lines</div> </div> </div> </div> <div class="frame"> scenario b <div class="container green"> <div class="item-list2"> <div class="item">item 1</div> <div class="item">item 2 might wrap multiple lines</div> <div class="item">item 3</div> <div class="item">item 4</div> <div class="item">item 5</div> <div class="item">item 6</div> <div class="item">item 7</div> </div> </div> </div> </body> here's css:
body { margin:0; padding:0; font-family:arial; font-size:100%; } .green {background:chartreuse;} .red {background:crimson;} .frame {display:inline-block;} .container { display:table; width:10em; height:10em; } .item-list1 { display:table-cell; width:100%; height:100%; vertical-align:middle; overflow-y:auto; /* nil table-cell*/ } .item-list2 { width:100%; height:100%; overflow-y:auto; vertical-align:middle; /* nil without table-cell */ } .item { margin:1em; }
i not understand why , how technique works, does!!!!!! based on aligning technique described @ end of this article.
for result check out jsfiddle. note how first illustration scenario , b have same class applied it!!!
here css did job:
.container { display:block; width:10em; height:10em; overflow: auto; } .container:before{ content: ''; display: inline-block; height: 100%; vertical-align: middle; } .item-list1 { display:inline-block; width: 8em; vertical-align:middle; } html css
No comments:
Post a Comment