css3 - CSS vertically centered element fails to wrap -

css3 - CSS vertically centered element fails to wrap -

i'm vertically centering element using lastly method on this page. it's working well, has pretty big issue. when browser lean element fit @ total width, rather having automatic word wrapping kick in element jumps downwards below container. container has overflow: hidden, ends hiding element.

here's fiddle showing problem. (you can click , drag vertical seperator in order shrink output frame until issue appears)

code here in-case jsfiddle inaccessible:

css:

.outer { height: 300px; background: black; } .outer:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .inner { display: inline-block; vertical-align: middle; background: white; }

html:

<div class="outer"> <div class="inner"> test test test test test test test test test </div> </div>

for pictures:

good:

bad:

desired:

with centering situation, height of contents unknown height of parents known.

is there way me have vertical centering , fluid layout? (with pure css)

thanks,

ym

edit: answer, deleted, suggested seek display: inline instead of display: inline-block kid element. (maybe) closer want achieve, not quite there:

html:

<div id="outer"> <div id="inner"> <div>some long content heresome long content heresome long content heresome long content heresome long content heresome long content heresome long content heresome long content heresome long content heresome long content here</div> </div> </div>

css:

#outer { background: black; } #inner { display: table-cell; vertical-align: middle; height: 300px; width: 100%; } #inner div { background: white; }

jsfiddle see more here , here.

css css3 responsive-design vertical-alignment fluid-layout